3

現在、ユーザーが入力した単語をページで検索し、見つかった単語を強調表示するスクリプトがあります。

ただし、ユーザーが検索している文字列にスペースを入れると、これは失敗します。これは、jQuery を使用してドキュメント テキストをノードに分割し、それぞれに現在の検索フレーズが含まれているかどうかを確認しているためです。

私ができるようにしたいのは、最初のスペースの後で失敗するのではなく、これを拡張してユーザー定義の文字列を検索することです。ただし、これを行う方法がまったくわからないので、誰かがここで私を助けてくれることを望んでいました.

ノードを見つけるために、私が現在取り組んでいるものは次のとおりです。

keyup(function({

    $(instance.textWrapper).html(instance.getOriginalText());               

    if (this.value.length >= instance.startSearchingLength) {

        var regx = new RegExp("(" + escape(this.value) + ")", 'gi');

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

        textNodes.each(function(){
            var $this = $(this);
            var content = $this.text();
            content = content.replace(regx, 
                                      '<span class="'
                                      + instance.highlightCssClass +
                                      '">$1</span>');
            $this.replaceWith(content);     
        });
    });
}

startSearchingLength検索が検索されなければならない長さとして、以前に定義されています。 highlightCssClass文字列が見つかったら、CSS クラスがその文字列をラップするものです。

失敗の例:

を検索すると、ページ上の のfoo bar各インスタンスが強調表示されますfooが、スペースが検出されるとすぐにそれらの強調表示が消え、完全な文字列が見つかりません。

そのため、コードは現在Text Node、検索クエリの各個人を検索していますが、スクリプトがファイルのすべてのテキストで任意の文字列を検索できるようにしたいと考えています。これを行う方法がわからないので、どんな助けでも大歓迎です！

ありがとう！

4

1 に答える 1

1

単純。間違ったエスケープを使用しています。それをドロップしescapeます。

this.value.replace(/([[\\^$.|?*+()])/g, "\\$1")

エスケープする必要があるのは、正規表現の予約文字です。

于 2012-08-07T19:47:14.963 に答える