Question

我正致力于建立一个文档库，其中每张卡片都是＆＃34;在我们的目录中是一个如下所示的字符串：

'<div class="cardBox col-lg-4 col-md-6 col-sm-12"><div class="card" style="margin-bottom: 1em;"><img class="card-img-top" src="' + data.values[n][5] + '" alt="Card image cap"><div class="card-body"><h5 class="card-title">' + data.values[n][0] + '</h5><h6 class="doctype card-subtitle mb-2 text-muted">' + data.values[n][3] + '</h6><p class="card-text"><span class="font-weight-bold">Document Part #:</span> ' + data.values[n][1] + '<br /><span class="font-weight-bold">Rev:</span> ' + data.values[n][4] + '<br /><span class="font-weight-bold">Language:</span> <span class="language">' + data.values[n][10] + '</span><br /><span class="font-weight-bold">Customer:</span> <span class="customer">' + data.values[n][2] + '</span><br /><span class="font-weight-bold">Date Updated:</span> ' + data.values[n][11] + '</p><a href="' + data.values[n][7] + '" class="card-link" target="_blank">View Document</a><a href="' + data.values[n][6] + '" class="card-link" target="_blank">Download</a></div></div></div>'

我已经建立了一个搜索功能，通过此字符串查看输入搜索字段的文本，如下所示：

function searchByTitle() {
        var filter, card, title, i
        filter = document.getElementById("searchText").value.toUpperCase().split(" ");
        card = document.getElementById("content").getElementsByClassName("cardBox");
        console.log(filter);

        for (h = 0; h <= filter.length; h++) {
            for (i = 0; i < card.length; i++) {
                if (card[i].innerHTML.toUpperCase().includes(filter[h]) == true) {
                    card[i].style.display = "";
                } else {
                    card[i].style.display = "none";
                }
            }
        }
    }

问题是，如果搜索一组子字符串（在输入字段中用空格分隔），如果子字符串不按顺序排列，则页面不会显示与搜索字符串匹配的文档。

所以，如果我要搜索：freezer widget thingy，如果这三个子字符串没有按照卡片中的确切顺序出现，则不会显示任何内容。

基本上：如何在字符串中搜索在较大字符串中以任意顺序出现的子字符串？

编辑：尝试遍历我搜索的文字以及搜索字词数组，但没有运气。

编辑2：尝试使用上面修改后的代码循环。现在，当我输入输入字段时，我的搜索没有返回任何内容。这里发生了什么？

Answer 1

您可以使用此代替card[i].innerHTML.toUpperCase().includes(...filter.split(' '))

Answer 2

我建议您使用正则表达式执行此类任务：

if (searchText.match(/(^(?=.*freez)(?=.*widget).*$)/g)){
   card[i].style.display = ""; 
} else {
   card[i].style.display = "none";
}

那将匹配例如：

freezer widget
widget freezer
freezer widget thingy

此reg exp机制(?=.*something)使用了外观，更多http://www.rexegg.com/regex-disambiguation.html#lookarounds

可以轻松扩展reg exp以寻找更多的环视组。只需添加您要查找的新单词：

/(^(?=.*freez)(?=.*widget)(?=.*deer)(?=.*warlock).*$)/g

在较大的字符串

2 个答案: