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

Posted 2023-03-05

【中文标题】无法确定字符串是不是包含数组中的单词

【英文标题】：Unable to determine if a string contains a word from an array无法确定字符串是否包含数组中的单词

【发布时间】：2018-06-11 04:43:24

【问题描述】：

我正在尝试使用 jQuery 的 inArray 函数来确定字符串是否包含数组中的单词，此处显示的是 https://***.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>

【问题讨论】：

逻辑是倒退的。需要遍历数组并根据较长的字符串检查每个单词。您正在尝试查看数组中是否存在长 html 字符串

您需要遍历斜体内的 a 元素...并检查它们的 innerhtml

【参考方案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>

【讨论】：

有没有机会给我解释一下if(array.some(text => textContent.includes(text))) 这行代码？

它检查textContent.includes(text) 是否为array 中的至少一个元素返回true。在我们的例子中，如果array 中的至少一项包含在textContent 中

啊，我明白了。你能告诉我=> 在这种情况下的用途吗？

这被命名为arrow function。你可以搜索一下

【参考方案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>

【参考方案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>

【参考方案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>

【参考方案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')
      
   );