Question

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

在下面的示例中，它应该打印＆＃39; hi＆＃39;到了控制台两次，因为你好＆＃39;你好＆＃39;在字符串中是两次并且在数组中，但它没有。

＆＃13;

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');
  }
}

＆＃13;

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

＆＃13;

Answer 1

使用$(".myClass .ui-dialog-titlebar").css ({"background-color": "pink"});更改inArray功能。

通过array.some(text => itag.textContent.includes(text))声明所有变量。

而不是var or const or let使用innerHTML。这不会尝试解析内容并且会更快地工作。

＆＃13;

textContent

＆＃13;

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

＆＃13;

Answer 2

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

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

因此，如果将上述语句转换为代码，则应为

＆＃13;

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');
    }
  }
}

＆＃13;

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

＆＃13;

Answer 3

更简单的方法是循环使用单词数组并使用: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时获取值。因此，最好将值一次存储在一个变量中，而不是在一个循环中取出它，在循环中必须一次又一次地创建它;好吧，除非价值可能已经改变。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 5

找到它的最优雅方式显然是RegExp

    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')
      }
   });

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

5 个答案: