jQuery: how to wrap selected text

Question

I would like to use the below function to get the currently selected text (source: javascript replace selection all browsers).

In my case I don't want to replace the selected text but instead would like to add something before and after it, mainly HTML tags (by click on a button).

Example: Selected text = Hello New text (html) = <u>Hello</u>

Code to get selected text:

  function replaceSelection(html) {
        var sel, range, node;

        if (typeof window.getSelection != "undefined") {
            // IE 9 and other non-IE browsers
            sel = window.getSelection();

            // Test that the Selection object contains at least one Range
            if (sel.getRangeAt && sel.rangeCount) {
                // Get the first Range (only Firefox supports more than one)
                range = window.getSelection().getRangeAt(0);
                range.deleteContents();

                // Create a DocumentFragment to insert and populate it with HTML
                // Need to test for the existence of range.createContextualFragment
                // because it's non-standard and IE 9 does not support it
                if (range.createContextualFragment) {
                    node = range.createContextualFragment(html);
                } else {
                    // In IE 9 we need to use innerHTML of a temporary element
                    var div = document.createElement("div"), child;
                    div.innerHTML = html;
                    node = document.createDocumentFragment();
                    while ( (child = div.firstChild) ) {
                        node.appendChild(child);
                    }
                }
                range.insertNode(node);
            }
        } else if (document.selection && document.selection.type != "Control") {
            // IE 8 and below
            range = document.selection.createRange();
            range.pasteHTML(html);
        }
    }

Code to call function:

replaceSelection('<span><font color="red">hoho</font></span>');

Can someone tell me how i can achieve this by modifying the above ?

Many thanks for any help with this, Tim.

you taged your answer with jquery, but i do not see that you are using it. With jQuery this problem would be very easy to solve. — Laurynas Mališauskas, Nov 14 '13 at 09:01
Thanks. I am using jQuery in general, just didnt have it included here yet. If there is a way to resolve it this way I am happy to use it. — user2571510, Nov 14 '13 at 09:32
You may want to see: https://stackoverflow.com/questions/24690357/add-tags-around-selected-text-in-an-element — Avinav Chalise, Feb 24 '21 at 07:18

rybo111 · Accepted Answer · 2013-11-14T10:02:51.910

2

jQuery's append() and prepend() should do the trick.

$(".my-span").prepend("<u>").append("</u>");

HTML:

<div>
  <span class="my-span">Hello</span>
</div>

edited Nov 14 '13 at 10:02

answered Nov 14 '13 at 09:03

rybo111

12,240
4
61
70

Thanks for this. How would I link this to the above ? – user2571510 Nov 14 '13 at 09:35
1

Change the `.my-span` part to whatever element you want to prepend and append. Put `.` before a `class` name or `#` before `id`. – rybo111 Nov 14 '13 at 10:00
$(".my-span").wrap("u") – tjvg1991 Feb 03 '17 at 09:02

Manoj.jsm · Answer 2 · 2014-01-16T11:43:00.043

1

i think this may help u

HTML

<div id="abc">I am a div.</div>
<br />
<input value="Add Before" id="before" type="submit">
<input value="Add After" id="after" type="submit">
<input value="InSide Before" id="inSideB" type="submit">
<input value="To Replace With Html" id="inSideRpHtml" type="submit">
<input value="To Replace With Text" id="inSideRpText" type="submit">

JQ

$(document).ready(function(){

   //for adding Before
   $("#before").click(function () {
$("#abc").before("Before<br />");
});
   //for adding After
   $("#after").click(function () {
$("#abc").after("After<br />");
});
    //for adding Inside before
    $("#inSideB").click(function () {
$("#abc").prepend("New Content!");
});

     //for adding Inside after 
    $("#inSideA").click(function () {
$("#abc").append("New Content!");
});
    // for Replacing with Html content
    $("#inSideRpHtml").click(function () {
$("#abc").html("<span><font color=red>hoho</font></span>");
});
   // for Replacing with Text content
    $("#inSideRpText").click(function () {
$("#abc").text("<span><font color=red>this is text");
});

});

Check This Link Here is the Live Demo

If this is what you need put a Reply..

edited Jan 16 '14 at 11:43

answered Nov 14 '13 at 09:25

Manoj.jsm

138
1
6

Thanks for this. My idea is to do both at once, i.e. prepend and append at the same time. I'll check if I can get it working this way with your code. – user2571510 Nov 14 '13 at 09:34
2

I had Updated Some More Code on JSFiddle. you can check it by using same link or [CheckThis](http://jsfiddle.net/Vy9P6/17/).☺ – Manoj.jsm Nov 14 '13 at 09:41
Thanks, Manoj. The problem here is that it uses the whole div but i would need it to work with the selected text only. The above function will tell me what I have selected so the question is only how to combine this with your function so that it prepends and appends something to the selected text (not to the div). – user2571510 Nov 14 '13 at 09:59
1

hi i think i got solution for you **[Check This link](http://jsfiddle.net/Vy9P6/18/)**. if it match reply me.. – Manoj.jsm Nov 14 '13 at 12:10

jQuery: how to wrap selected text

2 Answers2