1

私はWebAppを開発しています。記事をすばやく検索する機能があります。

2つの言葉で構造は次のとおりです。

  • ページ
  • ajaxによってフェッチされる記事を含むグローバル配列（json、100〜150アイテム）。（フィールド：id、title、snippet）。Title＆Snippetには、シンプルなスタイルのマークアップタグが含まれている場合があります。

したがって、ユーザーがポップアップクイック検索フィールドにクエリを入力すると、アプリ

  1. グローバル配列で検索
  2. 一致pushするものが見つかった場合、一時的な検索結果の配列（キャッシュ付き）
  3. 臨時雇用者の一致を強調表示します。結果の配列とユーザーへの表示

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

現在、プリミティブを使用して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>')と、それも置き換えeられstyle="color:red"ます。

つまり、タグ内の単語に触れないようにする正規表現パターンは何ですか？

2番目の例：強調表示する必要があるItem Yため、期待される結果は次のようになります。<ul><li><em>Item <i><span style="color:red">Y</em></span></i></li></ul>

4

2 に答える 2

0

私の理解が正しければ、DOM ツリーのフラグメントのテキスト コンテンツ内を検索する必要があります。これを実現する 1 つの方法は、XML/HTML テキスト コンテンツを使用することです。この例では jQuery を使用していますが、アイデアは他のライブラリに簡単に移植できます。

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 を使用して一致のオフセットを取得するなど)。

于 2012-04-26T15:27:57.170 に答える
-1

簡単なハックの解決策は、検索文字列のすべての文字の間のマークアップを探すことです。キーワードが「検索」の場合、次のようになります。

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

しかし、実際にはそれ以上のことを行う必要があります。

  • スクリプト
  • テキストエリア
  • display:none、visibility:hidden、など
于 2012-04-04T17:43:47.480 に答える