1

私は次のHTML文字列を持っています：

<span class="class1">Hello</span> my <span class="class1">name</span> is Mads.

「my」、「is」、「Mads」という単語を検出して、まだスパンタグの一部ではない文字列でそれらの単語をラップすることは可能ですか？

だからそれは

<span class="class1">Hello</span> <span class="class1">my</span> <span class="class1">name</span> <span class="class1">is</span> <span class="class1">Mads.</span>

前もって感謝します。

4

4 に答える 4

2

次のことを試してください。

HTML：

<div id="parent">
    <span class="class1">Hello</span> my <span class="class1">name</span> is Mads.
</div>

jQuery：

$(document).ready(function(){
    $('#parent').contents().filter(function() {
        return this.nodeName == '#text';
    }).replaceWith(function(){
        return this.nodeValue.replace(/([a-zA-Z0-9_-]+)/g, '<span class="class1">$1</span>');
    });
});

デモ： http： //jsfiddle.net/CDe5j/

上記のコードは#parentオブジェクトを取得し、を使用contents()して子を取得します。次にfilter()、提供されたセレクターを各要素に対してテストするメソッドを適用し、セレクターに一致するすべての要素が選択されます。スパン以外のテキスト要素のみが選択されると、replaceWith（）メソッドを使用して、すべての英数字、アンダースコア、およびハイフンの正規表現を介して、個々の単語がスパン要素としてラップされるようにします。通常の表現に関する追加情報は、こちらで確認できます。

于 2012-07-02T19:08:36.580 に答える
1

親要素を取得する場合は、jQueryオブジェクトのtext（）関数を使用してテキストを取得できます。split（ ""）を使用して配列を作成し、それを反復処理して各トークンをタグでラップできます。

于 2012-07-02T19:13:51.740 に答える
1

まず、次のように、HTML文字列をDIV要素に配置してDOMに解析します。

<div id="wrap">
   <span class="class1">Hello</span> my <span class="class1">name</span> is Mads.
</div>

次に、次のコードを実行します。

var $wrap = $( '#wrap' );

$wrap.contents().filter(function () {
    return this.nodeType === 3 && $.trim( this.data );
}).replaceWith(function () {
    return this.data.replace( /(\w+)/g, '<span class="class1">$1</span>' );
});

上記のコードを実行した後、次のように結果の文字列を取得できます。

var result = $wrap.html();

ライブデモ： http： //jsfiddle.net/Rhpaa/1/

私は/(\w+)/単語を一致させるために使用しています。どれだけ信頼できるかわかりません。確実に機能しない場合は、SOでより信頼性の高い単語一致正規表現を見つけてください。

于 2012-07-02T21:35:09.753 に答える
0

右、

私はそれをクラックしました-それはあなたたちが見た中で最も美しいコードではないかもしれませんが。

htmlスパンは-blurイベントで更新されます（div編集可能フィールドの外側をクリックしたとき）。

jsfiddleの例へのリンク！

于 2012-07-03T08:49:59.237 に答える