网页中文检测脚本指南：从控制台到浏览器插件

在国际化（i18n）项目或多语言适配场景中，我们经常需要快速找出页面中遗留的中文文本。本文整理了几个实用的 JavaScript 小脚本，覆盖控制台运行、书签运行、浏览器插件三种使用方式，按需取用即可。

背景

在做多语言适配、汉化检查或国际化工单排查时，手动翻页面找中文既费时又容易遗漏。借助一段递归遍历 DOM 的脚本，可以一键定位页面中所有包含中文字符的文本节点，并高亮/汇总输出。

下面按"由轻到重"的顺序，依次给出三种实现方案。

---

版本 1：控制台运行

最轻量的方案，无需安装、无需配置，复制粘贴即可使用。

脚本源码

function bfs(root) {
    if (root == null) return 0;
    var result = 0;
    var q = [];
    q.push(root);

    while (q.length > 0) {
        let node = q.shift();

        for (let i = 0; i < node.childElementCount; i++) {
            child = node.children[i];
            if (child.childElementCount == 0) {
                var txt = child.innerText;
                if (/.*[一-龥]+.*$/.test(txt)) {
                    result += 1;
                    console.log(txt);
                    console.log(child);
                }
            } else {
                q.push(child);
            }
        }
    }
    return result;
}

var cnt = bfs(document.body);
console.log("存在中文 " + cnt + " 条");

使用方法

1. 在目标页面按 F12 打开开发者工具
2. 切换到 Console 面板
3. 粘贴上面的代码并回车

运行效果

控制台输出命中元素的文本内容及对应 DOM 节点，并在最后打印命中总数。

---

版本 2：书签运行（Bookmarklet）

将脚本保存为浏览器书签，在任意页面点击即可运行，比控制台粘贴更便捷。下面给出三个递进版本，可按需求选择。

版本 2.1：基础版 —— 弹窗 + 控制台

只输出结果，不做页面标记。

javascript:(function () {
    var c = 0, q = [document.body], r = /[一-龥]/;
    while (q.length) {
        var n = q.shift();
        for (var i = 0; i < n.childNodes.length; i++) {
            var ch = n.childNodes[i];
            if (ch.nodeType === 3) {
                var t = ch.textContent.trim();
                if (r.test(t)) {
                    c++;
                    console.log(ch);
                }
            } else if (ch.nodeType === 1) {
                q.push(ch);
            }
        }
    }
    console.log('🎯 检查完毕，共发现 ' + c + ' 处中文');
    alert('检查完毕，共发现 ' + c + ' 处中文');
})();

使用方法：浏览器新建书签，将上述代码粘贴到"网址"一栏，在需要检查的页面点击该书签即可。

运行效果：弹窗提示命中总数，控制台同步输出命中的文本节点。

---

版本 2.2：高亮版 —— 红框标记

在 2.1 的基础上，给命中元素的父节点加上红色外框和浅红背景，页面上一眼可见。

javascript:(function () {
    var c = 0, q = [document.body], r = /[一-龥]/;
    while (q.length) {
        var n = q.shift();
        for (var i = 0; i < n.childNodes.length; i++) {
            var ch = n.childNodes[i];
            if (ch.nodeType === 3) {
                var t = ch.textContent.trim();
                if (r.test(t)) {
                    c++;
                    var p = ch.parentElement;
                    if (p && !p.style.outline) {
                        p.style.outline = '2px solid red';
                        p.style.backgroundColor = 'rgba(255,0,0,0.05)';
                    }
                }
            } else if (ch.nodeType === 1) {
                q.push(ch);
            }
        }
    }
    console.log('🎯 检查完毕，共发现 ' + c + ' 处中文');
    alert('检查完毕，共发现 ' + c + ' 处中文');
})();

运行效果：弹窗提示命中总数，命中元素以红框高亮显示。

---

版本 2.3：表格版 —— console.table 输出

将命中信息以表格形式打印，结构化更清晰，便于复制和分析。

javascript:(function () {
    var hits = [],
        q = [document.body],
        r = /[一-龥]/;
    while (q.length) {
        var n = q.shift();
        for (var i = 0; i < n.childNodes.length; i++) {
            var ch = n.childNodes[i];
            if (ch.nodeType === 3) {
                var t = ch.textContent.trim();
                if (r.test(t)) {
                    var p = ch.parentElement;
                    if (p && !p.style.outline) {
                        p.style.outline = '2px solid red';
                        p.style.backgroundColor = 'rgba(255,0,0,0.05)';
                        hits.push({
                            tag: p.tagName.toLowerCase(),
                            text: t.slice(0, 50) + (t.length > 50 ? '...' : ''),
                            xpath: (function (e) {
                                var s = [];
                                while (e && e.nodeType === 1) {
                                    s.unshift(e.tagName.toLowerCase());
                                    e = e.parentNode;
                                }
                                return '/' + s.join('/');
                            })(p)
                        });
                    }
                }
            } else if (ch.nodeType === 1) {
                q.push(ch);
            }
        }
    }
    console.table(hits);
    console.log('🎯 共 ' + hits.length + ' 处中文');
    alert('共发现 ' + hits.length + ' 处中文，详见控制台');
})();

运行效果：弹窗提示命中总数，命中元素红框高亮，控制台以表格输出标签、文本摘要、XPath 等信息。

---

版本 3：浏览器插件

如果需要更完整的功能（一键复制、导出 JSON、批量管理），可以直接使用打包好的 Chrome 插件。

• 关注公众号：【Code自习室】
• 后台回复关键词：中文检测

使用方法

1. 下载源码到本地
2. 在 Chrome 中打开 chrome://extensions/
3. 启用"开发者模式"，选择"加载已解压的扩展程序"，选中插件目录
4. 在需要检查的页面点击插件图标即可运行

运行效果

• 输出命中元素总数
• 列出每个命中元素的详细信息
• 支持一键复制命中信息或导出为 JSON
• 命中数据在页面上以红色高亮标记

---

实现思路简析

三种方案的核心逻辑一致：

1. 广度优先遍历 DOM：以 document.body 为根，使用队列 q 逐层遍历所有子节点。
2. 判定中文：用正则 /[一-龥]/（等价于 /[一-龥]/）匹配 CJK 统一汉字范围。
3. 节点类型区分：
   • nodeType === 3 → 文本节点，检查内容
   • nodeType === 1 → 元素节点，继续入队遍历
4. 去重与高亮：通过 p.style.outline 是否已设置来判断该父元素是否已被标记，避免重复高亮和重复统计。

版本 1 的差异在于它遍历的是 children（元素节点）而非 childNodes（含文本节点），且通过 childElementCount == 0 判断叶子元素再取 innerText，逻辑上更粗略，但已能满足快速排查需求。版本 2/3 改用 childNodes + nodeType 判断，更贴近 DOM 实际结构，精度更高。

---

方案对比

方案	易用性	功能完整度	适用场景
控制台脚本	⭐⭐⭐⭐⭐	⭐⭐	临时排查、一次性使用
书签运行	⭐⭐⭐⭐	⭐⭐⭐	频繁检查多个页面
浏览器插件	⭐⭐⭐	⭐⭐⭐⭐⭐	长期使用、需要导出数据

---

总结

• 偶尔用一下：直接复制版本 1 到控制台
• 要反复检查：把版本 2.3 存成书签
• 要持久化、可复用、可导出：装版本 3 的浏览器插件

按场景选择合适的工具，才能让脚本真正发挥作用。希望这篇指南对正在做多语言适配的同学有所帮助。

---