gpt4 book ai didi

javascript - 如何使用 JSON 和 vanilla JavaScript 制作多语言网站

转载 作者:行者123 更新时间:2023-11-28 17:52:02 24 4
gpt4 key购买 nike

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

我有这两个文件:

index.htm

<html>
<head>
<!-- blah blah blah -->
</head>
<body>
<h1> <var>GLOBAL.CONTENT.SAMPLE_TEXT</var> </h1>
<h2> <var>OTHER.TEST.TEST</var> </h2>
<p>
<i> <var>GLOBAL.CONTENT.LOADING</var> </i>
</p>
</body>
</html>

en.json

{
"global": {
"content": {
"loading": "Loading...",
"sample_text": "Lorem ipsum dolor sit amet.",
}
},
"other": {
"test": {
"test": "THIS IS A TEST"
}
}

我已经知道如何将 JSON 解析为 new Object变量以及如何访问每个变量。但我不知道的是如何制作每个 <var></var>将其实际内容替换为相应的路径,例如:

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

等等...提前致谢。

最佳答案

使用 javascript new Function 方法

//Parsed data
var json= {
"global": {
"content": {
"loading": "Loading...",
"sample_text": "Lorem ipsum dolor sit amet.",
}
},
"other": {
"test": {
"test": "THIS IS A TEST"
}
}
};

//Insert the data
var varTags=document.getElementsByTagName("var");
for(var i =0;i<varTags.length;i++){
try{
varTags[i].textContent=(
new Function('return this.'+varTags[i].textContent.toLowerCase()+';')).call(json);
}catch(e){
varTags[i].textContent="";
console.log("Error in <var/> Tag: "+e.message);
}
}
<html>
<head>
<!-- blah blah blah -->
</head>
<body>
<h1> <var>GLOBAL.CONTENT.SAMPLE_TEXT</var> </h1>
<h2> <var>OTHER.TEST.TEST</var> </h2>
<p>
<i> <var>GLOBAL.CONTENT.LOADING</var> </i>
</p>
</body>
</html>

关于javascript - 如何使用 JSON 和 vanilla JavaScript 制作多语言网站,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45288470/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com