3

我遇到了一个我无法进一步思考的问题。简而言之，我有一个ul数百个li，每个li都有几十个单词作为文本；在列表的最顶部，我放置了一个输入框，供用户输入一些关键字；例如，假设我想从那个巨大的列表中只过滤掉同一行中存在以下三个单词的行：“ red sweet strawberries ”。点击搜索按钮后，这些行被过滤掉了，我只有两行包含我感兴趣的单词。

li1：“我迫不及待地想吃点红甜草莓”

li2：“现在是夏天，红甜的草莓现在很新鲜”

到此为止，一切都很好。

当三个查找的单词被字符串中的其他单词或字符分隔时，就会出现问题。因此，以上面的示例为例，过滤器永远不会向我显示以下行：

li3：“又红又甜的草莓已经上市了”

因此，在这里我列出了过滤和整理上例结果的整个函数：

$(document).ready(function() {
      var links = new Array();
      $("h4").each(function(index, element) {
      links.push({
            text: $(this).text(),
            element: element
        });
    });

    $("#searchbutton").click(function() {
        var query = $("#inputtext").val();
        var querywords = query.split(',');

        var results = new Array();
        for(var i = 0; i < querywords.length; i++) {
            for(var j = 0; j < links.length; j++) {
                if (links[j].text.toLowerCase().indexOf(querywords[i].toLowerCase()) > -1) {
                    results.push(links[j].element);                    
                    }
            }
        }

        $("h4").each(function(index, element) {
            this.style.display = 'none';
        });
        for(var i = 0; i < results.length; i++) {
            results[i].style.display = 'block';
        }

    });     

});

是否可以搜索多个子字符串并获得结果，即使子字符串由字符或其他单词分隔？

4

2 回答 2

6

这是做我认为你想要的一种方式。

var results = new Array();
for ( var i = 0; i < querywords.length; i++ ) {
    var regex = new RegExp( 
        '(?=.*\\b' + querywords[i].split(' ').join('\\b)(?=.*\\b') + '\\b)', 'i'
    );
    for ( var j = 0; j < links.length; j++ ) {
        if ( regex.test( links[j].text ) ) {
            results.push( links[j].element );
        }
    }
}

例如，如果querywords包含 item "red sweet strawberries"，则regex创建的将是

/(?=.*\bred\b)(?=.*\bsweet\b)(?=.*\bstrawberries\b)/i

使用三个正向前瞻，以便在同一行中包含三个单词的字符串通过测试（如果它们被单词边界包围）。

演示：JSFIDDLE。

于 2013-03-19T17:48:18.473 回答
0

如果我理解正确，整个问题是：

var querywords = query.split(',');

在示例查询中，您没有逗号。所以我想这是一个错误？用空格分割查询：

var querywords = query.split(' ');
于 2013-03-18T23:23:35.913 回答