1

クライアントの Wordpress サイトにテキストを強調表示する検索スクリプトを実装しようとしています。このスクリプトは、Web ページの生の HTML データに対して正規表現検索を実行し、クエリに一致するドキュメントの任意の部分にスパン タグ/css 要素を追加します。

ただし、いくつかのマルチレベル HTML (ヘッダーなど) を検索しようとしていますが、一部のタグには説明的な ID とクラス名があり、実際にはスクリプトによって検出されて強調表示されます。これにより、スクリプトが名前の 1 つに一致するものを見つけたときに、奇妙な動作が発生しますid(例: "Cont" を検索すると、.<div id="Container"><div id="<span class="highlight">Cont</span>ainer">

これは明らかに私が望むものではありません。

したがって、実際に表示される HTML の要素のみを強調表示できるように、ページに表示される「実際のテキスト」と生の HTML を区別する方法があるかどうか疑問に思っています。

ありがとう！

4

1 に答える 1

2

トピックの質問には答えていましたが、混乱を避けるために最初の投稿を削除しました。)しかし、あなたの場合、別のアプローチを使用する必要があると思います:

1）すべてのテキストノードを取得する...

var textNodes = $('body').find('*').contents().filter(function() { 
  return this.nodeType === 3 });

2) 検索用語をいくつかの置換 op で強調表示します。

var term = 'xxx';
textNodes.each(function() {
  var $this = $(this);
  var content = $this.text();
  content = content.replace(term, '<span class="highlight">' + term + '</span>');
  $this.replaceWith(content);
}
于 2012-06-14T21:16:43.330 に答える