本文详细介绍了如何利用原生javascript实现客户端html页面的多语言翻译功能。通过构建一个自定义的翻译工具类，结合外部json语言包，实现基于html自定义属性的文本内容动态替换。教程涵盖了翻译逻辑的实现、语言切换机制、json文件定义以及页面集成方法，并提供了相关代码示例和实践考量，帮助开发者构建灵活的国际化网页。
在现代Web应用开发中，为用户提供多语言支持是提升用户体验和拓展市场的重要一环。对于纯HTML页面，通过JavaScript实现客户端动态翻译是一种常见且有效的解决方案。本教程将指导您如何从零开始，构建一个基于自定义属性和JSON语言包的轻量级翻译系统。
首先，我们需要创建一个JavaScript文件（例如translate.js），其中包含处理语言数据加载和DOM元素更新的核心逻辑。Translate类将负责初始化翻译设置并执行实际的文本替换操作。
// translate.js
function Translate() {
// 初始化方法，设置自定义属性名和目标语言
this.init = function(attribute, lng) {
this.attribute = attribute; // HTML元素中用于标识翻译键的属性名
this.lng = lng; // 目标语言代码
};
// 执行翻译过程
this.process = function() {
var _self = this; // 缓存当前Translate实例的引用
var xrhFile = new XMLHttpRequest();
// 异步加载语言文件
xrhFile.open("GET", "lng/" + this.lng + ".json", false); // 同步请求，但在实际项目中推荐使用异步
xrhFile.onreadystatechange = function () {
if (xrhFile.readyState === 4) { // 请求完成
if (xrhFile.status === 200 || xrhFile.status == 0) { // 请求成功
var LngObject = JSON.parse(xrhFile.responseText); // 解析JSON语言包
var allDom = document.getElementsByTagName("*"); // 获取页面所有DOM元素
// 遍历所有DOM元素，查找并替换文本
for (var i = 0; i < allDom.length; i++) {
var elem = allDom[i];
var key = elem.getAttribute(_self.attribute); // 获取自定义属性值作为翻译键
if (key != null) {
// 如果找到对应的翻译键，则更新元素的innerHTML
// 注意：innerHTML会替换所有子内容，包括HTML标签。对于纯文本或包含简单HTML的翻译，此方法适用。
elem.innerHTML = LngObject[key];
}
}
}
}
};
xrhFile.send(); // 发送请求
};
}代码说明：
接下来，创建一个名为index.js的文件，用于处理语言切换的用户交互和页面加载时的初始化翻译。
立即学习“Java免费学习笔记（深入）”；
// index.js
// 当用户点击切换语言时调用此函数
function translate(lng, tagAttr) {
var translate = new Translate(); // 创建Translate实例
translate.init(tagAttr, lng); // 初始化
translate.process(); // 执行翻译
// 更新语言切换按钮的样式，提供视觉反馈
if (lng == 'en') {
$("#enTranslator").css('color', '#f4623a').addClass('active');
$("#khTranslator").css('color', '#212529').removeClass('active');
}
if (lng == 'kh') {
$("#khTranslator").css('color', '#f4623a').addClass('active');
$("#enTranslator").css('color', '#212529').removeClass('active');
}
}
// 文档加载完成后执行
$(document).ready(function() {
// 为英文切换按钮绑定点击事件
$("#enTranslator").click(function() {
translate('en', 'lng-tag');
});
// 为高棉语切换按钮绑定点击事件
$("#khTranslator").click(function() {
translate('kh', 'lng-tag');
});
});代码说明：
翻译文本应以JSON格式存储在独立的语言文件中。建议在项目根目录下创建一个lng文件夹，并在其中为每种支持的语言创建一个JSON文件，文件名与语言代码对应（例如en.json代表英文，kh.json代表高棉语）。
示例：lng/en.json
{
"paragraph-1": "Hello world",
"paragraph-2": "This is a translated text!",
"aboutPage": "About"
}示例：lng/kh.json
{
"paragraph-1": "សួស្តីពិភពលោក",
"paragraph-2": "នេះជាអត្ថបទបកប្រែ!",
"aboutPage": "អំពី"
}结构说明：
最后一步是将上述JavaScript文件和翻译机制集成到您的HTML页面中。
引入JavaScript文件： 在HTML页面的
采用目前业界最流行的模版编译系统，所有的页面都可以实现在线/离线修改，只需简单掌握HTML的知识，就可以轻松创建属于自己的个性化的专业用户界面，内建多语言包替换模块，独创的商品参数模版系统，强大的后台管理支持和数据备份功能
0
<!-- 引入jQuery库 --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <!-- 引入自定义翻译逻辑 --> <script src="js/translate.js"></script> <!-- 引入语言切换和初始化逻辑 --> <script src="js/index.js"></script>
设置页面加载时的初始语言： 在
标签上使用onload事件来在页面首次加载时设置默认语言。<body id="page-top" onload="translate('kh','lng-tag')">这里，页面加载时将默认显示高棉语（kh），并使用lng-tag作为自定义属性名。
定义可翻译的HTML元素： 为您希望翻译的HTML元素添加自定义属性（例如lng-tag），其值应与JSON语言包中的键相匹配。