window.getSelection() gives me the selected text, but I want the HTML

by

Take a look at the DOM Range spec. You can get a Range from the user selection in Firefox using:

var range = window.getSelection().getRangeAt(0);

Note that some browsers, including Firefox, allow multiple selections, which can be accessed via the getRangeAt() method of the selection.

The Range is expressed in terms of DOM nodes and offsets within those nodes. Once you’ve got your Range, it’s not straightforward to do exactly what you want, since the range’s boundaries could be in different nodes at different levels of the DOM tree, so simply surrounding the Range’s content with a tag is not always possible. You may be able to do something like the following, although it will create a new block element to contain the selected content:

var range = window.getSelection().getRangeAt(0);
var selectionContents = range.extractContents();
var div = document.createElement("div");
div.style.color = "yellow";
div.appendChild(selectionContents);
range.insertNode(div);

Another, hacky, alternative is to use the execCommand() method of document to modify the selection (e.g. by setting it to a particular colour) and then using document.querySelectorAll or some selector library to select elements with that colour and then apply styling to them.

More Related Contents:

  1. How can I get the DOM element which contains the current selection?
  2. Is there a spec that the id of elements should be made global variable?
  3. Converting HTML string into DOM elements?
  4. Check if an element contains a class in JavaScript?
  5. Chrome extension – retrieving global variable from webpage
  6. innerText vs innerHTML vs label vs text vs textContent vs outerText
  7. Get next / previous element using JavaScript?
  8. Why is the value of my input always empty if I store it in a variable?
  9. Get selected option text with JavaScript
  10. What is innerHTML on input elements?
  11. Coordinates of selected text in browser page
  12. How to convert a DOM node list to an array in Javascript?
  13. Is there a DOM event that fires when an HTML select element is closed?
  14. Is innerHTML asynchronous?
  15. Does the onchange event propagate?
  16. Difference between Element.value and Element.getAttribute(“value”)
  17. Is there any “on DOM change” event? [duplicate]
  18. Why is the variable holding the input value always logged as empty?
  19. Can I apply CSS to the elements within an iframe?
  20. HTML DOM: Which events do not bubble?
  21. Changing the order of elements
  22. createElement vs. createElementNS
  23. Focus Input Box On Load
  24. Why does JavaScript navigator.appName return Netscape for Safari, Firefox and Chrome?
  25. getElementsByClassName() with two classes
  26. Trying to set a span element equal to a variable value in a JS Rock, Paper, Scissors Game
  27. What is the difference between `firstChild` and `firstElementChild`?
  28. How can I get access to a Highcharts chart through a DOM-Container?
  29. How can I remove wrapper (parent element) without removing the child?
  30. contenteditable div backspace and deleting text node problems

Leave a Comment