2

HTMLページがあります。段落のいくつかの単語を（マウスで）選択し、それらの選択された単語への参照を取得して、たとえば<span>...</span>タグによってプログラムでカプセル化することは可能ですか？jQueryまたはHTML5/CSS3を使用できますか？

4

2 に答える 2

3

mouseupハンドラーを使用して、を使用できますgetSelection。と呼ばれるdivがあるとするとtesttagging、これはそのdiv内の選択したテキストにスパンを追加する方法です。この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も適応されています

于 2012-07-11T10:00:46.890 に答える
0

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()。

この質問を参照するか、このコードを適応させるように依頼してください。

于 2012-07-11T09:44:20.540 に答える