0

次の方法でフィルターを使用しています

$("body div header").find("*").addBack().contents().filter(function(){
    console.log(this.nodeType);
    return this.nodeType === 3;
}).each(function() {
    $(this).parent().html(this.nodeValue.replace(/abc/g, '<span class="abc">abc</span>'));
})

ただし、一致した単語にクラスを追加しないため、これは機能しません。http://jsfiddle.net/hrEyC/3/

何が間違っている可能性がありますか？これを大文字と小文字を区別しないようにするにはどうすればよいですか?

4

1 に答える 1

0

明らかにheader、マークアップには何もないため、処理しようとしている最初の jQuery オブジェクトは空です。

ただし、全体のアプローチは少し間違っています。さまざまなテキスト ノードが親として同じノードを持ちますが、基本的にこのノードの innerHTML を毎回書き直します。実際には、この例の最初の子テキスト ノードのほとんどは'\n 'フレーバーのものであるため、他のすべては問題ではありません。それらは、最初の対応する$(this).parent().html()呼び出しの後に消えます。

実際に使用する必要があるのは、replaceWith jQuery メソッドです。例えば：

$("body div").find("*").addBack().contents().filter(function(){
    return this.nodeType === 3 && /abc/i.test(this.nodeValue);
}).replaceWith(function() {
  return this.nodeValue.replace(/(abc)/g, '<span class="abc">$1</span>');
});

デモ。ここで、追加で処理するノードのリストをreplaceWith(with で/abc/.test(...)) トリムして、このリストをできるだけスリムにしました。

この検索で​​大文字と小文字を区別しないようにするため/iに、両方の正規表現に修飾子を追加しました (また$1、置換文字列でも使用されます。強調表示されたときに「ABC」が「abc」になることは望ましくありません)。

于 2013-11-13T18:15:18.790 に答える