无法确定字符串是否包含数组中的单词

Question

我正在尝试使用 jQuery 的 inArray 函数来确定字符串是否包含数组中的单词，此处显示的是 https://stackoverflow.com/a/18867667/5798798

在我下面的示例中，它应该在控制台上打印两次“hi”，因为单词“Hello”在字符串中出现了两次并且在数组中，但它没有。

var array = ["Hello", "Goodbye"];

a = document.getElementsByClassName("here");

for (i = 0; i < a.length; i++) {
  itag = a[i].getElementsByTagName("i")[0];
  if (jQuery.inArray(itag.innerHTML, array) !== -1) {
    console.log('hi');
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="here"><i><a href="link.php">Hello</a> | <a href="link2.php">Example</a></i>
</div>

<div class="here"><i><a href="link.php">Hey</a> | <a href="link2.php">Hello</a></i>
</div>

Answer 1

将inArray 函数更改为array.some(text => itag.textContent.includes(text))。

通过var or const or let声明所有变量。

使用textContent 代替innerHTML。这不会尝试解析内容 并且工作得更快。

var array = ["Hello", "Goodbye"];

var a = document.getElementsByClassName("here");

for (var i = 0; i < a.length; i++) {
    var itag = a[i].getElementsByTagName("i")[0];
    var textContent = itag.textContent;
    if(array.some(text => textContent.includes(text))) {
       console.log(textContent);
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="here"><i><a href="link.php">Hello</a> | <a href="link2.php">Example</a></i>
</div>

<div class="here"><i><a href="link.php">Hey</a> | <a href="link2.php">Hello</a></i>
</div>

Answer 2

您正在检查 innerHTML 是否在数组中。

其实你应该检查内部html是否包含任何数组元素。

所以如果把上面的语句转换成代码，应该是

var array = ["Hello", "Goodbye"];

a = document.getElementsByClassName("here");

for (i = 0; i < a.length; i++) {
   debugger;
   var itag = a[i].getElementsByTagName("i")[0];
   for (var k in array) {
    if(itag.innerHTML.indexOf(array[k]) > -1){
    console.log('hi');
    }
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="here"><i><a href="link.php">Hello</a> | <a href="link2.php">Example</a></i>
</div>

<div class="here"><i><a href="link.php">Hey</a> | <a href="link2.php">Hello</a></i>
</div>

Answer 3

更简单的方法是遍历 words 数组并使用 :contains 选择器

var array = ["Hello", "Goodbye"],
    $links = $('.here i a');

$.each(array, function(i, word){
  $links.filter(':contains(' + word +')').addClass('word-match');
})

.word-match {color:red}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="here"><i><a href="link.php">Hello</a> | <a href="link2.php">Example</a></i>
</div>

<div class="here"><i><a href="link.php">Hey</a> | <a href="link2.php">Hello</a></i>
</div>

Answer 4

不是真正的答案，而是对@SurenSrapyan answer 的扩展，并进一步改进了您的代码。

您可以将其编写为针对节点的单个 CSS 选择器，而不是在这里处理嵌套的 getElementsByTagName 和 getElementsByClassName：document.querySelectorAll('.here i:first-of-type');

innerHTML 和 textContent 都是 getter，它们在您通过遍历 DOM 获取值时创建值。因此，最好将值一次存储在变量中，而不是在必须一遍又一遍地创建它的循环中获取它；好吧，除非值可能已经改变。

var words = ["Hello", "Goodbye"];
var nodes = document.querySelectorAll('.here i:first-of-type');

for(var i=0; i<nodes.length; ++i){
    var node = nodes[i];
    var textContent = node.textContent;
    if(words.some(word => textContent.includes(word))) {
       console.log(node, textContent);
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="here">
  <i><a href="link.php">Hello</a> | <a href="link2.php">Example</a></i>
  <i>Hello, not matching me, as I'm not the first &lt;i&gt; in .here</i>
</div>

<div class="here"><i><a href="link.php">Hey</a> | <a href="link2.php">Hello</a></i>
</div>

Answer 5

最优雅的查找方式显然是正则表达式

    var array = ["Hello", "Goodbye"];

    var a = document.getElementsByClassName("here");
    Array.prototype.forEach.call(a, function( node ) {
      var itag = node.getElementsByTagName("i")[0]
      if (itag.innerHTML.match(new RegExp(array.join('|'), 'gi'))) {
        console.log('hi')
      }
   });