在较大的字符串中搜索多个子字符串

Question

I'm working on building a document library, in which each of the "cards" in our catalog are a string that looks like this:

'<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>'

I've built a search function that looks through this string for the text input into the search field, that looks like this:

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";
                }
            }
        }
    }

The problem is, if you search for a set of substrings (separated by spaces in the input field), if the substrings are NOT in sequential order, the page shows no documents that match the search string.

So, if I were to search for: freezer widget thingy , if those three substrings do not appear in that exact order within the card, nothing will be displayed.

Basically: how can I search through a string for substrings that appear in any arbitrary order within the larger string?

EDIT: Tried to loop through both the text I'm searching through, as well as the array of search terms, but with no luck.

EDIT 2: Tried to go about looping things with the above, modified code. Now my search isn't returning anything when I type into the input field. What's going on here?

Answer 1

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

Answer 2

I would suggest you to use regular expression for such task:

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

That would match for example:

freezer widget
widget freezer
freezer widget thingy

This reg exp mechanism (?=.*something) uses lookarounds, more http://www.rexegg.com/regex-disambiguation.html#lookarounds

That reg exp can be easily expanded to look for more lookaround groups. Simply add new words you are looking for:

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