比较我的数组直到数组中有多个值

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)）。该函数需要一个字符串作为搜索词，而不是一个数组。

您的数组正在转换为字符串。当您的数组只包含一个字符串而没有其他元素时，它可以工作，因为它的字符串表示是同一个字符串。但是当你的数组包含多个元素时，它的字符串表示是所有这些字符串的逗号分隔列表，并且不会正确比较。

您将需要遍历数组以便为数组中的每个字符串搜索集合中的项目（我已重命名参数以明确您传递的是数组）：

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>

比较我的数组直到数组中有多个值

Comparing my array works until the array has multiple values in it

javascript

arrays

dynamic-arrays