Question

如何在元素中的选定文本周围添加标记？

例如，如果某人突出显示“John”，我想在其周围添加span标签。

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/

这里有一个相同的问题：jQuery select text and add span to it in an paragraph，但它使用过时的jquery方法（例如直播），并且接受的答案有错误。

Answer 1

我有一个解决方案。获取选择的Range并删除它的内容，然后在其中插入新的span。

$('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);
});

您可以看到DEMO here

<强>更新

绝对地，选择将同时被删除。因此，如果需要，可以使用js代码添加选择范围。

Answer 2

你可以这样做。

$('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

参考Wrapping a selected text node with span

Answer 3

你可以试试这个：

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

并在您的fiddle中，您又开了一个新而不是结束。请更新。

Answer 4

这个工作（主要是 *）!! （从技术上讲，它可以做你想要的，但它需要HALP！）

JSFiddle

这会正确添加和，甚至如果您的元素中有多个选择实例，并且您只关心所选的实例！

如果您包含我的评论行，它第一次完美运行。事情变得那么时髦了。

我可以添加span标签，但是我很难用html替换明文。也许你能搞清楚吗？我们快到了！！这使用getSelection中的节点。但节点很难处理。

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.
});

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

4 个答案: