如何使用JSON和vanilla JavaScript制作多语言网页

我想用JSON文件和普通JS函数来翻译网页

我有以下两个文件：

index.htm

我已经知道如何将JSON解析为

新对象

变量，以及如何访问每个变量。 但我不知道的是如何让每个

用相应的路径替换其实际内容，例如：

<h1> <var>GLOBAL.CONTENT.LOADING</var> </h1>
     _________________________________
                     |
                     V
            <h1> Loading... </h1>

GLOBAL.CONTENT.load
_________________________________
|
v
加载。。。

等等。。。提前感谢。

用于检索所有标签

var

。并使用（如果模板仅包含纯文本）或（如果模板包含HTML）读取和修改内部内容

var allVars = document.getElementsByTagName('var');
for(var i = 0; i < allVars.length; i++) {
    var thisVar = allVars[i];

    alert(thisVar.innerText);

    thisVar.innerText = 'Hi there';
}

var allVars=document.getElementsByTagName（'var'）；
对于（变量i=0；i

用于检索所有标签

var

。并使用（如果模板仅包含纯文本）或（如果模板包含HTML）读取和修改内部内容

var allVars = document.getElementsByTagName('var');
for(var i = 0; i < allVars.length; i++) {
    var thisVar = allVars[i];

    alert(thisVar.innerText);

    thisVar.innerText = 'Hi there';
}

var allVars=document.getElementsByTagName（'var'）；
对于（变量i=0；i

---

在您的

正文

关闭之前，将其添加到

脚本

标记中：

//从JSON数据解析的对象。
变量转换={
“全球”：{
“内容”：{
“加载”：“加载…”，
“样本文本”：“Lorem ipsum dolor sit amet.”，
}
},
“其他”：{
“测试”：{
“测试”：“这是一个测试”
}
}
};
//循环遍历每个var元素。
[].forEach.call（document.getElementsByTagName（'var'），函数（translate）{
//解析转换路径。
变量路径=转换
.textContent
.trim（）
.toLowerCase（）
.split（'.'）；
试一试{
//假设每个翻译都有三层深度，否则打印空字符串。
translate.textContent=path.length==3？翻译[路径[0]][path[1]][path[2]]：''；
}捕获（e）{
//将错误记录到控制台（如果有），并使用空字符串而不是转换。
控制台错误（e）；
translate.textContent=''；
}
});

GLOBAL.CONTENT.SAMPLE_文本
其他测试

全局内容加载

在您的
正文
关闭之前，将其添加到
脚本
标记中：
//从JSON数据解析的对象。
变量转换={
“全球”：{
“内容”：{
“加载”：“加载…”，
“样本文本”：“Lorem ipsum dolor sit amet.”，
}
},
“其他”：{
“测试”：{
“测试”：“这是一个测试”
}
}
};
//循环遍历每个var元素。
[].forEach.call（document.getElementsByTagName（'var'），函数（translate）{
//解析转换路径。
变量路径=转换
.textContent
.trim（）
.toLowerCase（）
.split（'.'）；
试一试{
//假设每个翻译都有三层深度，否则打印空字符串。
translate.textContent=path.length==3？翻译[路径[0]][path[1]][path[2]]：''；
}捕获（e）{
//将错误记录到控制台（如果有），并使用空字符串而不是转换。
控制台错误（e）；
translate.textContent=''；
}
});

GLOBAL.CONTENT.SAMPLE_文本
其他测试

全局内容加载

使用javascript
新函数
方法


//解析数据
var json={
“全球”：{
“内容”：{
“加载”：“加载…”，
“样本文本”：“Lorem ipsum dolor sit amet.”，
}
},
“其他”：{
“测试”：{
“测试”：“这是一个测试”
}
}
};
//插入数据
var varTags=document.getElementsByTagName（“var”）；
对于（var i=0；i
使用javascript
新函数
方法


//解析数据
var json={
“全球”：{
“内容”：{
“加载”：“加载…”，
“样本文本”：“Lorem ipsum dolor sit amet.”，
}
},
“其他”：{
“测试”：{
“测试”：“这是一个测试”
}
}
};
//插入数据
var varTags=document.getElementsByTagName（“var”）；
对于（var i=0；i
我想知道如何用
对象
中对应的内容替换每一个对象的内容。请看示例。我想知道如何用
对象
中对应的内容替换每一个对象的内容。请看示例。太棒了！它工作起来很有魅力，非常感谢！@Davdriver请检查我的解决方案，还有some错误管理和在缺少翻译时使用占位符的可能性！@b00t你说得对！我根本忘了错误管理，我支持你的提示。对不起，如果我在这篇4年前的文章上发表评论，但你为什么要使用函数对象？这不危险吗？只访问元素dir的textContent不是更好吗真的吗？太棒了！它真的很有魅力，非常感谢！@Davdriver也请检查我的解决方案，有一些错误管理，如果缺少翻译，还可以使用占位符！@b00t你说得对！我完全忘了错误管理，我投票给你这个提示。很抱歉，如果我在这篇4年的帖子上发表评论，你为什么要批评我们定义一个函数对象？这不是很危险吗？直接访问元素的文本内容不是更好吗？这也是一个很好的代码，但有一个问题：网页将有一个JSON文件作为输入，它将有或多或少的“级别”，而您的代码似乎只处理3个级别（JSON.a.b.c，
var allVars = document.getElementsByTagName('var');
for(var i = 0; i < allVars.length; i++) {
    var thisVar = allVars[i];

    alert(thisVar.innerText);

    thisVar.innerText = 'Hi there';
}