为什么我的h3元素内容无法匹配数组中的指定文本？

核心问题 #

你的代码逻辑完全搞反了：当前是判断h3的完整文本是否完全等于targetTexts数组中的某一项，但你的需求是h3文本包含数组里的任意关键词。比如h3文本是“Top Generative AI Platforms”，转小写后是“top generative ai platforms”，它并不等于数组里的“generative ai”，所以includes返回false，触发不了替换。

另外还有潜在的空格干扰：h3的textContent可能包含前后空格、换行或者多个连续空格，比如实际文本是“Generative AI”（两个空格），转小写后和数组里的“generative ai”（一个空格）也无法精确匹配。

解决步骤 #

1. 修正匹配逻辑：改用Array.some()检查数组中是否有任意关键词存在于h3文本中，而非判断h3文本是否在数组里。
2. 标准化文本格式：对h3文本和数组关键词统一做去前后空格、合并连续空格、转小写的处理，消除格式差异导致的匹配失败。

修改后的代码 #

setTimeout(() => {
  console.log('SCRIPT BEGINS RUNNING');
  const results = document.querySelectorAll('div[jsname="N9Xkfe"]');
  const aiImg = 'https://www.shutterstock.com/image-vector/anti-ai-sign-no-aigenerated-600nw-2289609093.jpg';
  console.log(results);

  const targetTexts = [
    'ai', 'ai generated', 'generate ai', 'ai art',
    'stable diffusion', 'midjourney', 'generative ai',
    'ai-generated'
  ];

  // 标准化文本工具函数：消除空格、换行干扰，统一小写
  const normalizeText = (text) => {
    return text.trim().replace(/\s+/g, ' ').toLowerCase();
  };

  results.forEach(result => {
    const h3Element = result.querySelector('h3');
    console.log('H3 ELEMENT TEXT:', h3Element?.textContent);
    console.log('FOR EACH LOOP BEGINS');

    if (h3Element) {
      const normalizedH3Text = normalizeText(h3Element.textContent);
      // 检查数组中是否有任意关键词被包含在h3文本内
      const hasTargetText = targetTexts.some(keyword => {
        const normalizedKeyword = normalizeText(keyword);
        return normalizedH3Text.includes(normalizedKeyword);
      });

      if (hasTargetText) {
        console.log('MATCHED TARGET TEXT!!!');
        const imgElement = result.querySelector('img');
        if (imgElement) { // 增加存在性判断，避免找不到img报错
          console.log('IMAGE TO REPLACE:', imgElement);
          imgElement.setAttribute('src', aiImg);
        }
      }
    }

    console.log('FOR EACH LOOP ENDS');
  });

  console.log('END OF SCRIPT');
}, 2000);

关键修改说明 #

• normalizeText函数：统一处理文本格式，彻底解决空格、换行等格式差异带来的匹配问题。
• 替换判断逻辑：用targetTexts.some(...)实现“h3文本包含任意关键词”的核心需求，而非原代码的精确匹配逻辑。
• 新增imgElement存在性判断：避免页面结构变化导致找不到图片元素时抛出错误，提升脚本稳定性。

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