在元素中的选定文本周围添加标签

Question

How can I add <span> tags around selected text within an element?

For example, if somebody highlights "John", I would like to add span tags around it.

HTML

<p>My name is Jimmy John, and I hate sandwiches. My name is still Jimmy John.</p>

JS

function getSelectedText() {
  t = (document.all) ? document.selection.createRange().text : document.getSelection();

  return t;
}

$('p').mouseup(function(){
    var selection = getSelectedText();
    var selection_text = selection.toString();
    console.log(selection);
    console.log(selection_text);

    // How do I add a span around the selected text?
});

http://jsfiddle.net/2w35p/

There is a identical question here: jQuery select text and add span to it in an paragraph , but it uses outdated jquery methods (eg live), and the accepted answer has a bug.

Answer 1

I have a solution. Get the Range of the selecion and deleteContent of it, then insert a new span in it .

$('body').mouseup(function(){
    var selection = getSelectedText();
    var selection_text = selection.toString();

    // How do I add a span around the selected text?

    var span = document.createElement('SPAN');
    span.textContent = selection_text;

    var range = selection.getRangeAt(0);
    range.deleteContents();
    range.insertNode(span);
});

You can see the DEMO here

UPDATE

Absolutly, the selection will be delete at the same time. So you can add the selection range with js code if you want.

Answer 2

You can simply do like this.

$('body').mouseup(function(){
   var span = document.createElement("span");
    if (window.getSelection) {
        var sel = window.getSelection();
        if (sel.rangeCount) {
            var range = sel.getRangeAt(0).cloneRange();
            range.surroundContents(span);
            sel.removeAllRanges();
            sel.addRange(range);
        }
    }
});

Fiddle

Reference Wrapping a selected text node with span

Answer 3

You can try this:

$('body').mouseup(function(){
   var selection = getSelectedText();
   var innerHTML = $('p').html();
   var selectionWithSpan = '<span>'+selection+'</span>';
   innerHTML = innerHTML.replace(selection,selectionWithSpan);
   $('p').html(innerHTML);    
});

and In your fiddle you are again opening a new <p> instead of a closing </p> . Update that please.

Answer 4

THIS WORKS ( mostly *)!! (technically, it does what you want, but it needs HALP!)

JSFiddle

This adds <span ...> and </span> correctly, even if there are multiple instances of the selection in your element and you only care about the instance that's selected!

It works perfectly the first time if you include my commented line. It's after that when things get funky.

I can add the span tags, but I'm having a hard time replacing the plaintext with html. Maybe you can figure it out? We're almost there!! This uses nodes from getSelection . Nodes can be hard to work with though.

document.getElementById('d').addEventListener('mouseup',function(e){
    var s = window.getSelection();
    var n = s.anchorNode; //DOM node
    var o = s.anchorOffset; //index of start selection in the node
    var f = s.focusOffset; //index of end selection in the node
    n.textContent = n.textContent.substring(0,o)+'<span style="color:red;">'
        +n.textContent.substring(o,f)+'</span>'
        +n.textContent.substring(f,n.textContent.length);
        //adds the span tag
    // document.getElementById('d').innerHTML = n.textContent;
    // this line messes stuff up because of the difference 
    // between a node's textContent and it's innerHTML.
});