javascript - Highlight selected text on a page when spanning multiple non text nodes -
javascript - Highlight selected text on a page when spanning multiple non text nodes -
i'm trying write code highlight text selected on page, next code works in cases not when range partially selects non-text node (see http://www.w3.org/tr/dom-level-2-traversal-range/ranges.html#level-2-range-surrounding more details).
is there way split range 2 ranges , embolden both halfs separately around problem?
function makebold() { var selection = window.getselection(); if (selection.rangecount) { var range = selection.getrangeat(0).clonerange(); var newnode = document.createelement("b"); range.surroundcontents(newnode); selection.removeallranges(); selection.addrange(range); } }
you utilize document.execcommand()
. note in non-ie browsers you'll have temporarily create document editable.
jsfiddle: http://jsfiddle.net/c7j5h/1/
code:
function highlight() { var range, sel; // ie case if (document.selection && document.selection.createrange) { range = document.selection.createrange(); range.execcommand("bold", false, null); } else if (window.getselection) { // non-ie sel = window.getselection(); if (sel.rangecount && sel.getrangeat) { range = sel.getrangeat(0); } document.designmode = "on"; if (range) { sel.removeallranges(); sel.addrange(range); } document.execcommand("bold", false, null); document.designmode = "off"; } }
javascript dom
Comments
Post a Comment