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 solution.

I am able to output the selected text using alert, but have not yet figure out how to surround it with additional markup. I have seen many examples of running execCommand on the selection, but that is not what I'm looking for.

See my working example at jsfiddle

Any ideas? Thanks

My question is similar to this one, but I'm not using the YUI library... http://stackoverflow.com/questions/4077806/yui-editor-rte-how-to-wrap-selection-with-a-span-and-not-lose-formatting — Dan Sorensen, Apr 23 '11 at 16:28
This question is also related, and may solve my issue: http://stackoverflow.com/questions/4891338/how-can-i-use-jquery-to-apply-css-to-savedrange-text-selection — Dan Sorensen, Apr 23 '11 at 16:45

Tim Down · Accepted Answer · 2011-04-23T17:00:23.347

17

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 <span>. 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:

<style type="text/css">
    span.highlighted {
        background-color: yellow;
    }
</style>
<script type="text/javascript">
    var highlightApplier;

    window.onload = function() {
        rangy.init();
        highlightApplier = rangy.createCssClassApplier("highlighted ", true);
    };

    function applyHighlight() {
        highlightApplier.applyToSelection();
    }
</script>

edited Apr 23 '11 at 17:00

answered Apr 23 '11 at 16:54

Tim Down

318,141
75
454
536

1

Interesting point about the surroundContents(). I'll need to try some different scenarios and see how this works. I'll look into your library. Thanks! – Dan Sorensen Apr 23 '11 at 17:10
A far nicer solution than my own (hack-ish) attempt... +1 :) – David Thomas Apr 23 '11 at 18:34

score 2 · Answer 2 · edited May 23 '17 at 12:16

(Answering my own question based on a similar question I found when I posted mine...)

The guys in this Q&A thread were on an interesting track. It just used a different format than I was looking for. Modifying their code, I was able to do the following:

<h3><a href="#" id="btnRange">Display Range</a> |
<a href="#" id="btnMark">Mark Range</a></h3>

<div contenteditable="true" id="editor">
    This is sample text. You should be able to type in this box or select anywhere in this div and then click the link at the top to get the selected range.
</div>

<script type="text/javascript">
    var btnDisplay = $("#btnRange"),
        btnMark = $("#btnMark");

    btnDisplay.click(function() {
        alert(window.getSelection().getRangeAt(0));
        return false;
    });

    btnMark.click(function() {
        var range = window.getSelection().getRangeAt(0);
        var newNode = document.createElement("mark");
        range.surroundContents(newNode);
        return false;
    });

I could further abstract the code in the btnMark.click() function to accept a tag name and then create a row of buttons to markup the code with mark, pre, blockquote.

A working solution can be found here: http://jsfiddle.net/3tvSL/

While this works well in my super simple text only example, as noted in another answer by Tim Down, "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." — Dan Sorensen, Apr 23 '11 at 17:07

score 0 · Answer 3 · answered Aug 23 '17 at 11:58

First get the range:

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

On button click:

   function formatCode(e){
        var textAreaVal = document.getElementById('divWithContentEditable').innerText;
        if(textAreaVal.length>0){
            var newtxt = '<pre><code>'+savedRange+'</code></pre>'
            replaceIt($('#topicDetails')[0], newtxt);
        }
    }

Add/Replace elements around the text:

replaceIt(txtarea, newtxt) {
    $(txtarea).text(newtxt));  
}

Of course, you can use Rangy but I find adding extra 500kb for simple requirement is not recommended.

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

3 Answers3

Linked