3

私はページ用の単純なJavaScriptサーチャーを作成しましたが、不一致/誤った一致、および潜在的に不十分なcssクラスの一致に関するいくつかの問題が発生しています。

http://jsfiddle.net/C4q7T/

最初の例の「コード」（1つの要素にフィルターされます）をクリックしてから「スタイリング」リンクをクリックすると、「コード」のハイライトが残ります。言うまでもなく、これは望ましくありません。

コードのフィルタリング部分で問題が発生すると思いますが、すべて私には非常によく見えます。特に、タイトルのHTMLではなくタイトルのテキストを取得してから、新しいスパンを追加しているためです。

function filter(searchTerm) {
    var searchPattern = new RegExp('(' + searchTerm + ')', 'ig');  // The brackets add a capture group

    entries.fadeOut(150, function () {
        noResults.hide();

        $('header', this).each(function () {
            $(this).parent().hide();

            // Clear results of previous search
            $('li', this).removeClass('searchMatchTag');

            // Check the title
            $('h1', this).each(function () {
                var textToCheck = $('a', this).text();
                if (textToCheck.match(searchPattern)) {
                    textToCheck = textToCheck.replace(searchPattern, '<span class="searchMatchTitle">$1</span>');  //capture group ($1) used so that the replacement matches the case and you don't get weird capitolisations
                    $('a', this).html(textToCheck);
                    $(this).closest('.workshopentry').show();
                }
            });

            // Check the tags
            $('li', this).each(function () {
                if ($(this).text().match(searchPattern)) {
                    $(this).addClass('searchMatchTag');
                    $(this).closest('.workshopentry').show();
                }
            });
        });

        if ($('.workshopentry[style*="block"]').length === 0) {
            noResults.show();
        }

        entries.fadeIn(150);
    });
}

他のいくつかの組み合わせはこれを実現しますが、他のいくつかの組み合わせは実現しないため、この特定の問題の原因を突き止めるのは非常に困難です。

4

3 に答える 3

4

適切な引用符を使用しないと、正規表現を使用したユーザー入力を信頼することはできません。次のような引用関数の使用を検討してください。

var rePattern = searchTerm.replace(/[.?*+^$\[\]\\(){}|]/g, "\\$&"),
searchPattern = new RegExp('(' + rePattern + ')', 'ig');  // The brackets add a capture group

編集

コメントで述べたように、検索を実行するためにキャプチャ括弧が使用されている理由は明らかではありません。$&代わりのパターンとして使用できます。もちろん、この投稿の正規表現を簡略化していただければ理解できます:)

于 2012-11-21T06:53:03.647 に答える
1

searchTermをエスケープせずにsearchPatternを生成すると問題が発生する可能性があります。searchTermofは.*何にでも一致します。

var match = textToCheck.indexOf(searchTerm) >= 0代わりに使ってみませんか？

これにより、テキスト内のサブストリングの最初のインスタンスのインデックスが返さsearchTermれます。それ以外の場合は、-1が返されます。

于 2012-11-21T06:40:29.883 に答える
0

以前に一致したタグを削除するためのチェックがありませんでした。

var textToCheck = $('a', this).text();
if (textToCheck.match(searchPattern)) {
    //capture group ($1) used so that the replacement matches the case and you don't get weird capitolisations
    textToCheck = textToCheck.replace(searchPattern, '<span class="searchMatchTitle">$1</span>');
    $('a', this).html(textToCheck);
    $(this).closest('.workshopentry').show();
} else {
    $('a', this).html(textToCheck);
}
于 2012-12-05T12:47:44.670 に答える