比較我的數組，直到數組中有多個值

Question

我正在嘗試將多個值的數組傳遞給一個函數，該函數將檢查值是否存在於div列表中，如果存在，則用紅色背景標記它們。

當我將任意字符串作為參數傳遞時，我的代碼工作，當我有一個只有一個值的數組時，它可以工作。 但是，一旦我的數組中有兩個或多個值，它似乎就會中斷，並且控制台中沒有任何信息可以讓我知道。

我認為問題在於我如何編寫比較函數，但它也可能在於我如何傳遞數組。

 var postList = document.getElementsByClassName("post"); var userList = new Array(); //compares the user's keyword entries to the text in the divs, and marks "matching" divs with a red background function listComparison(collection, searchText) { for (var i = 0; i < collection.length; i++) { if (collection[i].innerText.toLowerCase().indexOf(searchText) > -1) { collection[i].style.backgroundColor = "red"; } } } //adds user entries to an array on click and clears out the textarea document.getElementById("save").addEventListener("click", function() { var listEntry = document.getElementById("listEntries").value; userList.push(listEntry); document.getElementById("listEntries").value = ""; console.log(userList); }) //event listener for the button that runs the collectionContains function above document.getElementById("run").addEventListener("click", function() { listComparison(postList, userList); }); 

 div { background: #d0dbe6; margin: 5px; width: 50%; } #list { width: 300px; height: 100px; } 

 <textarea placeholder="Enter words here one at a time and click 'Add to Filter'" id="listEntries"></textarea> <br> <button id="save" for="listEntries">Add to Filter</button> <button id="run">Run Filter</button> <div class="post">religion</div> <div class="post">cats</div> <div class="post">hotdogs</div> <div class="post">babies</div> <div class="post">test me please</div> <div class="post">filler</div> <div class="post">lorem ipsum</div> <div class="post">your mom</div> <div class="post">religion again</div> <div class="post">build a wall</div> <div class="post">no it's becky</div> <div class="post">anything with religions in it is screwed!</div> 

Answer 1

問題在於您將數組傳遞給String#indexOf() collection[i].innerText.toLowerCase().indexOf(searchText) （如collection[i].innerText.toLowerCase().indexOf(searchText) ）。 該函數需要一個字符串作為搜索項，而不是一個數組。

發生的事情是你的數組被轉換成一個字符串。 當您的數組只包含一個字符串而沒有其他元素時，它的工作原理是因為它的字符串表示形式是相同的字符串。 但是當您的數組包含多個元素時，其字符串表示形式是所有這些字符串的逗號分隔列表，並且不能正確比較。

您將需要循環遍歷數組，以便在集合中搜索數組中的每個字符串中的項目（我已重命名該參數以清楚地表明您正在傳遞數組）：

 var postList = document.getElementsByClassName("post"); var userList = new Array(); //compares the user's keyword entries to the text in the divs, and marks "matching" divs with a red background function listComparison(collection, searchList) { for (var i = 0; i < searchList.length; i++) { for (var j = 0; j < collection.length; j++) { if (collection[j].innerText.toLowerCase().indexOf(searchList[i]) > -1) { collection[j].style.backgroundColor = "red"; } } } } //adds user entries to an array on click and clears out the textarea document.getElementById("save").addEventListener("click", function() { var listEntry = document.getElementById("listEntries").value; userList.push(listEntry); document.getElementById("listEntries").value = ""; console.log(userList); }) //event listener for the button that runs the collectionContains function above document.getElementById("run").addEventListener("click", function() { listComparison(postList, userList); }); 

 div { background: #d0dbe6; margin: 5px; width: 50%; } #list { width: 300px; height: 100px; } 

 <textarea placeholder="Enter words here one at a time and click 'Add to Filter'" id="listEntries"></textarea> <br> <button id="save" for="listEntries">Add to Filter</button> <button id="run">Run Filter</button> <div class="post">religion</div> <div class="post">cats</div> <div class="post">hotdogs</div> <div class="post">babies</div> <div class="post">test me please</div> <div class="post">filler</div> <div class="post">lorem ipsum</div> <div class="post">your mom</div> <div class="post">religion again</div> <div class="post">build a wall</div> <div class="post">no it's becky</div> <div class="post">anything with religions in it is screwed!</div> 

Answer 2

 var userList = new Array(); //compares the user's keyword entries to the text in the divs, and marks "matching" divs with a red background function listComparison(collection, searchText) { collection.filter(function(elem) { return !!searchText.filter(function(text) { return elem.innerText.toLowerCase().indexOf(text) > -1; }).length; }).forEach(function(elem) { elem.style.backgroundColor = "red"; }); } //adds user entries to an array on click and clears out the textarea document.getElementById("save").addEventListener("click", function() { var listEntry = document.getElementById("listEntries"); userList.push(listEntry.value); listEntry.value = ""; console.log(userList); }) //event listener for the button that runs the collectionContains function above document.getElementById("run").addEventListener("click", function() { var collection = Array.prototype.slice.call(document.getElementsByClassName("post")); listComparison(collection, userList); }); 

 div { background: #d0dbe6; margin: 5px; width: 50%; } #list { width: 300px; height: 100px; } 

 <textarea placeholder="Enter words here one at a time and click 'Add to Filter'" id="listEntries"></textarea> <br> <button id="save" for="listEntries">Add to Filter</button> <button id="run">Run Filter</button> <div class="post">religion</div> <div class="post">cats</div> <div class="post">hotdogs</div> <div class="post">babies</div> <div class="post">test me please</div> <div class="post">filler</div> <div class="post">lorem ipsum</div> <div class="post">your mom</div> <div class="post">religion again</div> <div class="post">build a wall</div> <div class="post">no it's becky</div> <div class="post">anything with religions in it is screwed!</div>