JavaScript隐藏含特定文本元素失效，求问题原因及解决方法

核心错误点 #

• ID重复违反HTML规范：HTML要求同一文档内的ID必须唯一，你写了两个id="123test"的div，document.getElementById()只会返回第一个匹配的元素，第二个div永远不会被处理。
• 文本匹配精度问题：直接用== 'test'做全等匹配，若DOM文本包含空白字符（比如换行、空格）会导致匹配失败，应该用包含判断。
• 原生JS不支持:contains选择器：:contains是jQuery专属选择器，原生JS的querySelector系列方法不支持该伪类。

修复方案 #

1. 规范HTML+原生JS实现（推荐） #

先把重复的ID改为类，再遍历元素判断文本内容：

<div class="test-container"><p>test</p></div>
<div class="test-container"><p>othertext</p></div>

<script>
// 获取所有目标容器
const containers = document.querySelectorAll('.test-container');
// 遍历每个容器
containers.forEach(container => {
    // 去除首尾空白后判断是否包含目标文本
    if (container.textContent.trim().includes('test')) {
        container.style.display = 'none';
    }
});
</script>

2. 使用jQuery实现（若项目已引入jQuery） #

jQuery支持:contains选择器，直接选中并隐藏目标元素：

<div class="test-container"><p>test</p></div>
<div class="test-container"><p>othertext</p></div>

<script>
$('.test-container:contains("test")').hide();
</script>

3. 不修改HTML的临时方案（不推荐） #

若无法修改HTML的重复ID，可通过属性选择器选中所有匹配元素：

const containers = document.querySelectorAll('[id="123test"]');
containers.forEach(container => {
    if (container.textContent.trim().includes('test')) {
        container.style.display = 'none';
    }
});

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