從文本標記幾個詞

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也是改編的

Answer 2

JSFiddle working example

提出的所有段落自動換行到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()。

請參閱this問題或者讓我改編此代碼。