javascript - 标记文本中的几个词

Question

我们有一个 HTML 页面。是否可以(通过鼠标)选择段落中的几个词，获取对这些选定词的引用并将它们封装起来，比如说，通过 <span>...</span>以编程方式标记？我们可以使用 jQuery 或 HTML5/CSS3 吗？

Answer 1

您可以使用 mouseup 处理程序并使用 getSelection。假设您有一个名为 testtagging 的 div，那么这是一种向该 div 中的选定文本添加跨度的方法。参见 this jsfiddle .

$('#testtagging').on('mouseup',tag);

function tag(e){
    tagSelection('<span style="color:red">$1</span>');
}

function tagSelection(html) {
    var range, node;
    if (document.selection && document.selection.createRange) {
     //IE
     range = document.selection.createRange();
     range.pasteHTML(html.replace(/\$1/,range.text));
     return true;
    }
    if (window.getSelection && window.getSelection().getRangeAt) { 
     //other browsers
     range = window.getSelection().getRangeAt(0);
     node = range.createContextualFragment(
                  html.replace(/\$1/,range.toString())
            );
     range.deleteContents();     
     range.insertNode(node);
    } 
    return true;
}​

[编辑] 也针对 IE 进行了调整。 JsFiddle也适配了