标记文本中的几个单词

Tag few words from text

本文关键字：几个 单词 文本      更新时间：2023-09-26

我们有一个HTML页面。是否可以（用鼠标）选择一段中的几个单词，获得对这些所选单词的引用并封装它们，比如用程序化的<span>...</span>标签？我们可以使用jQuery或HTML5/CSS3？

您可以使用mouseup处理程序和getSelection。假设您有一个名为testtagging的div，那么这是一种将跨度添加到该div中所选文本的方法。

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

[edit]也调整为与IE一起使用。JsFiddle也适用于

JSFiddle工作示例

建议将所有段落单词包装成span元素：

var r = /('S+)/ig;
var text = $("p").text();
$("p").html(text.replace(r, "<span class='w'>$1</span>"));

然后绑定悬停/单击事件：

$("p > .w").on("hover", function()
{
    $(this).toggleClass("hover");
})
.on("click", function()
{
    $(this).toggleClass("selected");
});

如果要解析选定文本范围内的单词，则应使用window.getSelection()。

请参阅此问题或要求我调整此代码。

相关文章：