How To Wrap / Surround Highlighted Text With An Element
If the selection is completely contained within a single text node, you can do this using the surroundContents() method of the range you obtain from the selection. However, this is very brittle: it does not work if the selection cannot logically be surrounded in a single element (generally, if the range crosses node boundaries, although this is not the precise definition). To do this in the general case, you need a more complicated approach.
Also, DOM Range and window.getSelection() are not supported in IE < 9. You'll need another approach again for those browsers. You can use a library such as my own Rangy to normalize browser behaviour and you may find the class applier module useful for this question.
Simple surroundContents() example jsFiddle: http://jsfiddle.net/VRcvn/
Code:
function surroundSelection(element) { if (window.getSelection) { var sel = window.getSelection(); if (sel.rangeCount) { var range = sel.getRangeAt(0).cloneRange(); range.surroundContents(element); sel.removeAllRanges(); sel.addRange(range); } }}
function wrapSelectedText() { var selection= window.getSelection().getRangeAt(0); var selectedText = selection.extractContents(); var span= document.createElement("span"); span.style.backgroundColor = "yellow"; span.appendChild(selectedText); selection.insertNode(span);}Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus gravida magna, quis interdum magna mattis quis. Fusce tempor sagittis varius. Nunc at augue at erat suscipit bibendum id nec enim. Sed eu odio quis turpis hendrerit sagittis id sit amet justo. Cras ac urna purus, non rutrum nunc. Aenean nec vulputate ante. Morbi scelerisque sagittis hendrerit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla tristique ligula fermentum tortor semper at consectetur erat aliquam. Sed gravida consectetur sollicitudin. <input type="button" onclick="wrapSelectedText();" value="Highlight" />
Here's an attempt at a general solution that allows crossing element boundaries. Probably doesn't mix well with images, etc., nor non left-to-right text, but should be OK with simple cases.
First, here's a very general function for walking text nodes in the subtree defined by a Range object, from left to right. This will give us all the text we need as pieces:
function walkRange(range) { let ranges = []; let el = range.startContainer; let elsToVisit = true; while (elsToVisit) { let startOffset = el == range.startContainer ? range.startOffset : 0; let endOffset = el == range.endContainer ? range.endOffset : el.textContent.length; let r = document.createRange(); r.setStart(el, startOffset); r.setEnd(el, endOffset); ranges.push(r); /// Move to the next text container in the tree order elsToVisit = false; while (!elsToVisit && el != range.endContainer) { let nextEl = getFirstTextNode(el.nextSibling); if (nextEl) { el = nextEl; elsToVisit = true; } else { if (el.nextSibling) el = el.nextSibling; else if (el.parentNode) el = el.parentNode; else break; } } } return ranges;}That makes use of this utility function for getting the first (leftmost) text node in a subtree:
function getFirstTextNode(el) { /// Degenerate cases: either el is null, or el is already a text node if (!el) return null; if (el.nodeType == 3) return el; for (let child of el.childNodes) { if (child.nodeType == 3) { return child; } else { let textNode = getFirstTextNode(child); if (textNode !== null) return textNode; } } return null;}Once you've called walkRanges, you can just use surroundContents on what it returns to actually do the highlighting/marking. Here it is in a function:
function highlight(range, className) { range = range.getRangeAt ? range.getRangeAt(0) : range; for (let r of walkRange(range)) { let mark = document.createElement('mark'); mark.className = className; r.surroundContents(mark); }}and to unhighlight (assuming you used a unique class name for the highlight):
function unhighlight(sel) { document.querySelectorAll(sel).forEach(el => el.replaceWith(...el.childNodes));}Example usage:
highlight(document.getSelection(), 'mySelectionClassName');unhighlight('.mySelectionClassName')