0

HTML段落内の任意のテキストの周りにスパンをラップする簡単な方法はありますか？たとえば、次の元のhtmlがあるとします。

<p>Here is a dandy block of text to color up</p>
<p> WHOAH another paragraph</p>

ユーザー入力に基づいて、テキストの任意の部分を折り返したいのですが。したがって、1セットの入力がこれを次のように変換する可能性があります

<p>Here is a <span style="background:yellow">dandy block</span> of text to color up</p>
<p> WHOAH <span style="background:green">another paragraph</span></p>

別の入力セットが作成される可能性がありますが

<p>Here is a<span style="background:yellow">a dandy block</span> of text to color up</p>
<p> WHOAH <span style="background:green">another</span> paragraph</p>

この問題はこれとこれに関連していますが、私の目標との主な違いは、ハイライトを一時的な選択だけでなく永続的にしたいということです。また、これをテキスト領域ではなくp要素内で機能させたいということです。

可能であれば、jQueryを使用したように見えると思います

var innerText = $('p')[p_index].slice(char_start, char_end).text();
$('p')[p_index].slice(char_start, char_end).html(
    "<span style=\"background:yellow\">"+
    innerText +
    "</span>");

これにより、（理論的には）p_index段落が選択され、指定されたインデックス間の範囲が取得され、元のテキストがネストされた新しく作成されたスパンに置き換えられます。jQueryオブジェクトの添え字は別の内部jQueryオブジェクトを返さないため、これは明らかに機能しません。けれど

$("p").slice(0, 1).html("<span style=\"background: blue\">" +
                        $("p").slice(0, 1).text() + 
                        "</span>");

段落レベルでは正確に実行しますが、テキスト内レベルでは実行しません。このアプローチを使用して、私が持っている文字範囲を指定して各段落を完全に書くことで置換を行うことができますが、簡単な方法があれば、提案をいただければ幸いです。

4

4 に答える 4

2 
$("p")[p_index]

でその段落である実際のDOM要素を提供p_indexするため、使用する必要のある段落の内容を取得するには、次のようにします。

$("p")[p_index].innerHTML
// OR
$("p")[p_index].textContent

ただし、jQueryを使用する方が簡単です。jQueryslice()メソッドを使用して範囲を単一の要素に縮小するのではなく、メソッドを使用し.eq()ます。次のようなものを試してください。

$('p').eq(p_index).html(function(i,currentText) {
     return currentText.substring(0, char_start) +
            "<span style=\"background:yellow\">" +
            currentText.substring(char_start, char_end) +
            "</span>" +
            currentText.substring(char_end);
});

.html()関数をメソッドに渡すと、jQueryはhtmlを関数から返すものに設定します。jQueryは、要素の現在の（内部）htmlを関数に渡すため、処理できます。（複数の要素を含むjQueryオブジェクトでこれを行う場合、関数は要素ごとに1回呼び出されるため、個別に処理できます。）

デモ： http： //jsfiddle.net/62HHk/

于 2012-08-27T08:37:17.823 に答える
0

私は過去にこのプラグインを使用しましたが、素晴らしい結果が得られました。

于 2012-08-27T08:26:45.157 に答える
0

これを試して：

$('input[type=text]').keyup(function() {
    var val = $.trim(this.value);
    var text = $('p').text().split(' ')
    $.each(text, function(i, v) {
        if (v == val) {
            text[i] = '<span>'+v+'</span>';
        }
    })
    $('p').html(text.join(' '))   
})

フィドル

于 2012-08-27T08:32:22.087 に答える
0

これは機能するはずです。探している単語をパラメータとして取る関数に簡単に変換できます。

jQuery.textReplace by Ben Alman

$('.text').replaceText( /hello/g, '<span classs="interesting">hello</span>' );
于 2012-08-27T08:45:22.287 に答える