タグ内およびタグ外のテキストをハイライト表示するにはどうすればよいですか？

Question

私はWebAppを開発しています。私は記事をすばやく検索する機能があります。二つの単語構造で

である：AJAXによってフェッチされる物品と

• ページ
• グローバル配列（JSON、100-150項目）。 （フィールド：id、title、snippet）。タイトル&スニペットには、簡単なスタイルマークアップタグが含まれている場合があります。 （キャッシュ付き）
ので

、ポップアップ・クイックサーチフィールドにユーザタイプのクエリ、グローバル配列

でアプリ

1. 検索見つかった一致した場合、push一時的な検索結果の配列には
2. ハイライト一時的に一致します。結果配列とユーザーに表示

ご覧のとおり、元の配列は変更されていません。

Currenty私は原始的String.indexOfを使用していますが、それは、HTMLタグのテキスト（下記の例）を経由してフォーマットされた内のテキストと一致しないことができます。

質問は、正規表現パターンについてです。私は、RegExを使ってDOMを操作することは推奨されておらず、以下の結果が意味的に正しいとは期待していませんが、は適合する必要がありますです。例えば

： は、我々はこのようなものがあります：

<ul><li>Item <i><span style="color:red">Y</span></i></li></ul>

を、我々は結果を期待、クエリeを強調表示する必要があります：... It<em>e</em>m ...を、しかし、些細なreplace(/e/ig, '<em>$&</em>')使用している場合、それはあまりにもstyle="color:red"でeに置き換えられます。

つまり、タグ内の単語に触れないRegExパターンはありますか？

---

第二の例：私たちはそう結果は<ul><li><em>Item <i><span style="color:red">Y</em></span></i></li></ul>

Answer 1

短いハックソリューションは、検索文字列のすべての単一の文字の間にマークアップを探すことです期待し、Item Yを強調表示する必要があります。

(s)(<[.^>]*>)*(e)(<[.^>]*>)*(a)(<[.^>]*>)*(r)(<[.^>]*>)*(c)(<[.^>]*>)*(h)

しかし、現実には、あなたがするので、それ以上の操作を行う必要があります：

• スクリプト
• テキストエリア
• display:noneキーワードが、それは次のようになり "検索" の場合、visibility:hiddenなど

Answer 2

あなたはDOMツリーのフラグメントのテキストコンテンツ内を検索する必要があります。これを達成する1つの方法は、XML/HTMLテキストコンテンツを使用することです。この例では、jQueryのを使用していますが、考え方は、他のLIBSに簡単に移植です：

HTML：

<div id="article_contents"> 
Blah blah blah, Item 1, Item 2 blah blah <b>Ite</b>m <span>1</span> blah blah 
</div> 

はJavaScript：

var source = jQuery('#article_contents').text(); 
var queryRegexp = new RegExp ('Item 1', 'g'); 
var results = source.match (queryRegexp); 

今resultsは、検索文字列のすべての出現箇所を開催します。もちろん、結果を強調するという目標を達成するためには、さらにいくつかのステップを進める必要があります（RegExp.execを使用して一致のオフセットを取得するなど）。