我在两年半前给 SCP - 收容失效 中文网站 做过一个简单的繁简转换工具。我那个网站是纯静态，当时我也不会什么高级的技术（现在也是），所以我那时就从网上随便找了个 Javascript 库，大概改了改用。最近我在研究给这个网站搞备案，就顺便把网站打磨一下，其中一项就是把这个陈年垃圾代码改掉。最后用了十几行搞定，效果非常好。

我这个繁简转换工具用到了 OpenCC，一个非常好用的繁简转换工具。而且最吸引人的一点是，这个工具支持纯静态网站，只需要引入这个 Javascript 库，整个网站都可以自动转换，无需修改 HTML 文件。我觉得应该也有人需要这种简单的工具，所以我就写一篇文章来介绍一下。

<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/opencc-js@1.0.5/dist/umd/full.min.js"></script>
// 我承认这么做很不好，但够用就行
document.write("<a href=\"javascript:void(0);\" onclick=\"tranToSimp();\" target=\"_self\">简体中文</a> | <a href=\"javascript:void(0);\" onclick=\"simpToTran();\" target=\"_self\">繁体中文</a>");

const s2t = OpenCC.Converter({ from: 'cn', to: 'twp' });
const t2s = OpenCC.Converter({ from: 'twp', to: 'cn' });

$(document).ready(function() {
    if(getCookie("tran_conv") == "true") simpToTran();
});

async function simpToTran() {
    document.cookie = "tran_conv=true; domain=.scpcbgame.cn; path=/; expires=Fri, 31 Dec 9999 23:59:59 GMT";
    const walker = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT, null, false);
    let node;
    while (node = walker.nextNode()) {
        console.log(node.nodeValue);
        const convertedText = await s2t(node.nodeValue);
        node.nodeValue = convertedText;
    }
}

async function tranToSimp() {
    document.cookie = "tran_conv=false; domain=.scpcbgame.cn; path=/; expires=Fri, 31 Dec 9999 23:59:59 GMT";
    const walker = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT, null, false);
    let node;
    while (node = walker.nextNode()) {
        const convertedText = await t2s(node.nodeValue);
        node.nodeValue = convertedText;
    }
}

function getCookie(name) {
    const nameEQ = name + "=";
    const ca = document.cookie.split(';');
    for (let i = 0; i < ca.length; i++) {
        let c = ca[i];
        while (c.charAt(0) === ' ') c = c.substring(1, c.length);
        if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);
    }
    return null;
}

上面的就是这个工具全部代码，内容非常少，只需要稍微修改一下就能用。需要注意的是，引入这个文件时需要放在显示繁简转换设置 UI 的地方，因此需要把它放在 <body> 里面。此外，它还需要 jQuery 和 OpenCC。刚才的第一个代码片段就是这两个依赖的 HTML 代码。

引入这个工具前，需要修改这个代码里的内容：把 .scpcbgame.cn 换成你自己的域名。如果要在整个二/三域名里共享这个繁简设置，就需要在域名前面加点（.），否则就不需要。引入后，网站会在你引入的位置显示“简体中文”和“繁体中文”两个按钮，点击就可以转换网站的文字。

技术细节

这个工具在转换到繁体中文时，使用的是台湾地区标准及其地域用词，转换到简体中文则是默认大陆标准。如果你想要其他的转换设置，需要修改刚才代码中的 s2t 和 t2s 两个常量的配置。需要注意，这个工具不会保存你的网站原文。当点击“简体中文”时，实际上是把你的网站内容传给 OpenCC，并转换至简体中文。这种机制简单易懂，但是会造成原文和转换后内容的细微用词差距（不影响理解）。

点击“简体中文”或“繁体中文”后，工具会写入 Cookie，保存繁简转换设置。这个工具默认你的网站内容是简体中文，如果设置开启繁体中文，则工具会在页面加载完毕时自动转换内容，否则什么都不做。

这个工具的核心就是用 TreeWalker 遍历页面的文字元素，并传给 OpenCC 转换。转换完毕后，把转换的内容放回元素里。十分简单易懂。

实践

SCP - 收容失效 中文网站 用到了这个工具。跟它在同一二级域名下的 SCP：九尾狐 共享繁简转换设置。此外，我也给《自阅开发展》加了这个工具，在侧边栏的最下面。感兴趣的话可以试一试。

备注

非常不建议各位使用七牛云的 Staticfile CDN，因为这东西不允许缓存，每次访问页面时，浏览器都会重新下载文件。我网站的 jQuery 因为用这个 CDN，严重拖累了网站访问速度。

标签: 开发, Javascript