Search code examples
javascriptjqueryhighlighting

Using the mouse to highlight

I'd like to take the selected text on screen (text highlighted with the mouse) and when a button is pushed wrap that text in a tag. I'd like to use jquery but if it can be done in another framework that would be fine too.

I haven't been able to figure out how to do this yet, so any thoughts are appreciated. Also I know you can run into issues if the text goes across several elements so for now case just assume the text highlighted is all contained in a

tag.

Thanks!

Solution

  • Highlighting the selected text doesn't necessarily require you to wrap it. In fact, trying to wrap it is difficult if the range of the selection spans multiple tags (i.e. doesn't surround nicely closed tags).

    Here's an answer that highlights the current selection without wrapping it: Javascript Highlight Selected Range Button.

    He uses execCommand to let the browser highlight the current document selection for you. Pretty sweet.