乐于分享
好东西不私藏

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

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

在国际化(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 插件。

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

使用方法

  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 的浏览器插件

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


相关学习资料