How do I wrap a text selection from window.getSelection().getRangeAt(0) with an html tag?

Question

How do I take a selection from window.getSelection().getRangeAt(0) and surround it with an HTML tag such as \'span\' or \'mark\'? I prefer a straight javascript or jQuery so

Answer 1

If the selected text is all contained within a single text node, you can use the surroundContents() method of the Range. However, that doesn't work in the general case. The thing to do is surround each text node within the Range in a . My Rangy library has a module that does this and works cross-browser (IE <= 8 does not natively support DOM Range).

Example code using Rangy: