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

Add tags around selected text in an element

本文关键字：文本 周围添 加标记 元素      更新时间：2023-09-26

如何在元素内选定文本周围添加<span>标记?

例如，如果有人突出显示"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选择文本并在段落中添加span，但它使用过时的jQuery方法(例如live)，并且接受的答案有一个错误。

我有一个解决办法。获取所选内容的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

绝对，选择将同时被删除。因此，如果你愿意，你可以用js代码添加选择范围。

您可以简单地这样做。

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

小提琴

引用用span

包裹选定的文本节点

你可以试试:

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

和在您的fiddle中，您再次打开新的<p>而不是关闭</p>。

这是 (是 *) ! !(从技术上讲，它可以做你想要的，但它需要HALP!)

JSFiddle

这将正确地添加<span ...>和</span>， 甚至，如果元素中有多个选择的实例，并且您只关心被选择的实例!

第一次如果你包括我的注释行，它工作得很好。在那之后，事情就变得古怪了。

我可以添加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.
});
相关文章：