使用jQuery inArray判断DOM内容含数组元素未达预期输出的问题

嘿，我来帮你看看这个问题！你期望控制台打印两次'hi'但没实现，其实是两个关键问题在搞鬼：

核心问题拆解 #

1. innerHTML拿的是带HTML标签的内容，不是纯文本
   比如第一个<i>标签的innerHTML是<a href="link.php">Hello</a> | <a href="link2.php">Example</a>，这个完整字符串显然不在你的["Hello", "Goodbye"]数组里，所以jQuery.inArray返回-1，不会触发打印。

2. jQuery.inArray是精确匹配，不是检测包含关系
   它的作用是判断某个值是否完全等于数组中的某个元素，而不是判断字符串是否包含数组里的元素。你的需求是检查文本里有没有数组中的任意一个词，inArray根本做不到这件事哦。

修正后的解决方案 #

下面给你几种可行的写法，都能实现你要的效果：

方法1：原生JS遍历数组检查包含 #

先获取纯文本，再逐个检查数组里的词是否在文本中：

var array = ["Hello", "Goodbye"];
var elements = document.getElementsByClassName("here");

for (var i = 0; i < elements.length; i++) {
  var itag = elements[i].getElementsByTagName("i")[0];
  var text = itag.textContent.trim(); // 获取纯文本并去除首尾空格
  
  // 遍历数组，检查是否有词在文本里
  for (var j = 0; j < array.length; j++) {
    if (text.includes(array[j])) {
      console.log('hi');
      break; // 找到一个匹配项就停止，避免重复打印
    }
  }
}

方法2：正则表达式匹配（更简洁） #

把数组转成正则，一次性检查文本是否包含任意一个词：

var array = ["Hello", "Goodbye"];
// 转成正则，'i'表示不区分大小写，不需要的话可以去掉
var regex = new RegExp(array.join('|'), 'i');

var elements = document.getElementsByClassName("here");
for (var i = 0; i < elements.length; i++) {
  var itag = elements[i].getElementsByTagName("i")[0];
  var text = itag.textContent.trim();
  
  if (regex.test(text)) {
    console.log('hi');
  }
}

方法3：用jQuery简化代码 #

既然已经引入了jQuery，不妨用更简洁的写法：

var array = ["Hello", "Goodbye"];
var regex = new RegExp(array.join('|'), 'i');

$('.here i').each(function() {
  var text = $(this).text().trim();
  if (regex.test(text)) {
    console.log('hi');
  }
});

效果验证 #

现在运行上面任意一段代码，两个.here下的<i>标签文本都包含"Hello"，控制台会顺利打印两次'hi'，完全符合你的预期啦！

内容的提问来源于stack exchange，提问作者The Codesee