原生JavaScript实现仅高亮匹配条件的DOM元素 解决父元素误高亮问题

原代码出现父元素连带被高亮的核心原因：

• ele.textContent会返回当前元素及其所有后代元素的拼接文本，只要任意子节点包含英文字符，所有上层祖先节点的正则判断都会命中
• 原逻辑没有区分「元素自身的直接文本」和「子元素的文本」，导致非最内层的父节点被误判

只需要把匹配规则的判断对象，从元素全量文本textContent换成元素自身的直接文本（即仅取元素下文本类型子节点的内容，不递归获取子元素内部的文本）即可：

• 如果元素自身的直接文本包含英文字符，说明当前元素就是这部分英文字符的最内层容器，直接加高亮样式
• 父元素的直接文本只有节点间的空白/换行，不会被子元素里的英文影响，自然不会被误加样式
• 该逻辑兼容元素自身带英文、同时嵌套带英文子元素的场景，不会漏判

<!DOCTYPE html>
<html>
<body>
<h1>日本</h1>
<div>
    <div>日本</div>
    <div>1234</div>
</div>
<div>
    <div>abcd</div>
    <div>日本</div>
</div>
<!-- 混合场景测试：自身带英文+子元素带英文 -->
<div>
  testEnglish
  <span>spanEnglish</span>
</div>

<script>
    const charReg = /[a-zA-Z]/;
    document.querySelectorAll('*').forEach(ele => {
        // 仅拼接当前元素下的直接文本节点内容，不包含子元素文本
        const directText = Array.from(ele.childNodes)
            .filter(node => node.nodeType === Node.TEXT_NODE)
            .map(node => node.textContent.trim())
            .join('');
        // 直接文本匹配规则才加高亮
        if (charReg.test(directText)) {
            ele.style.border = "3px solid red";
        }
    });
</script>

</body>
</html>

• 用RegExp.test()代替String.match()做匹配，性能更高，不需要返回全量匹配结果
• 对直接文本做trim()处理，是为了忽略节点间的换行、空格等无意义空白字符，避免空白文本干扰判断
• 该逻辑和具体正则规则解耦，后续替换成匹配中文、特殊字符、特定关键词的规则，都可以直接复用，适配任意文本匹配高亮场景

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