How To Wrap / Surround Highlighted Text With An Element

by

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);
        }
    }
}

More Related Contents:

  1. How can I get the DOM element which contains the current selection?
  2. window.getSelection() gives me the selected text, but I want the HTML
  3. How can I tell if a DOM element is visible in the current viewport?
  4. For loop for HTMLCollection elements
  5. Browser detection versus feature detection
  6. Difference between HTMLCollection, NodeLists, and arrays of objects
  7. querySelector, wildcard element match?
  8. How to show Page Loading div until the page has finished loading?
  9. Retrieving the text of the selected in element
  10. How can I add a class to a DOM element in JavaScript?
  11. How to get the HTML for a DOM element in javascript
  12. JavaScript DOMParser access innerHTML and other properties
  13. How to find a parent with a known class in jQuery?
  14. jQuery count child elements
  15. Do I need to remove event listeners before removing elements?
  16. Why does document.querySelectorAll return a StaticNodeList rather than a real Array?
  17. Override default behaviour for link (‘a’) objects in Javascript
  18. What is the difference between Window and window?
  19. cloning javascript event object
  20. What is the difference between Document and document in JavaScript?
  21. Retrieving value from with multiple option in React
  22. Alternative to DOMNodeInserted
  23. How to append a childnode to a specific position
  24. How can I detect a Scrollbar presence ( using Javascript ) in HTML iFrame?
  25. How to add a onclick event to an element using javascript
  26. Test if an element can contain text
  27. Load javascript async, then check DOM loaded before executing callback
  28. How to check null objects in jQuery
  29. Screen Coordinates of a element, via Javascript
  30. Vanilla JS event delegation – dealing with child elements of the target element

Leave a Comment