getSelection & surroundContents across multiple tags

by

This question has been asked today: How can I highlight the text of the DOM Range object?

Here’s my answer:

The following should do what you want. In non-IE browsers it turns on designMode, applies a background colour and then switches designMode off again.

UPDATE

Fixed to work in IE 9.

function makeEditableAndHighlight(colour) {
    sel = window.getSelection();
    if (sel.rangeCount && sel.getRangeAt) {
        range = sel.getRangeAt(0);
    }
    document.designMode = "on";
    if (range) {
        sel.removeAllRanges();
        sel.addRange(range);
    }
    // Use HiliteColor since some browsers apply BackColor to the whole block
    if (!document.execCommand("HiliteColor", false, colour)) {
        document.execCommand("BackColor", false, colour);
    }
    document.designMode = "off";
}

function highlight(colour) {
    var range, sel;
    if (window.getSelection) {
        // IE9 and non-IE
        try {
            if (!document.execCommand("BackColor", false, colour)) {
                makeEditableAndHighlight(colour);
            }
        } catch (ex) {
            makeEditableAndHighlight(colour)
        }
    } else if (document.selection && document.selection.createRange) {
        // IE <= 8 case
        range = document.selection.createRange();
        range.execCommand("BackColor", false, colour);
    }
}

More Related Contents:

  1. How to get selected html text with javascript? [duplicate]
  2. Get caret (cursor) position in contentEditable area containing HTML content
  3. What’s the best way to set cursor/caret position?
  4. Apply a smarty modifier to JS?
  5. html form that passes information to a variable in javascript [closed]
  6. How to check if element is visible after scrolling?
  7. Remove element by id
  8. Data-toggle tab does not download Leaflet map
  9. What is the meaning of the “at” (@) prefix on npm packages?
  10. What’s the fastest way to loop through an array in JavaScript?
  11. When to use functional setState
  12. Detect when an image fails to load in JavaScript
  13. Make several requests to an API that can only handle 20 request a minute
  14. What does the @ symbol do in javascript imports?
  15. Sharing global javascript variable of a page with an iframe within that page
  16. Converting a recursive function into an asynchronous CPS implementation (javascript)
  17. google chrome extension :: console.log() from background page?
  18. How to read line by line of a text area HTML tag
  19. How can I highlight the line of text that is closest to the mouse?
  20. Is there a way using Jquery to detect the back button being pressed cross browsers
  21. Call Javascript function from URL/address bar
  22. Load JSON content from a local file with http.get() in Angular 2
  23. Hour difference between two times(HH:MM:SS a)in momentjs
  24. Custom Legend with ChartJS v2.0
  25. Insert hyphens in JavaScript
  26. Angular 2 Final Release Router Unit Test
  27. Piping remote file in ExpressJS
  28. How can I load jQuery if it is not already loaded?
  29. Set Caret Position in ‘contenteditable’ div that has children
  30. How to use components in v-html

Leave a Comment