How to made a multi-lang webpage with JSON and vanilla JavaScript
Question
I would like to made way to translate a webpage using JSON files and vanilla JS functions.
I have these 2 files:
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"
}
}
I already know how to parse the JSON to a new Object variable and how to access to every variable. But what I don't know is how to made every <var></var> to replace its actual content with its corresponding path, example:
<h1> <var>GLOBAL.CONTENT.LOADING</var> </h1>
_________________________________
|
V
<h1> Loading... </h1>
And so on... Thanks in advance.
3 answers
solution1
2 2017-07-24 20:04:31
Add this in a script tag right before your body closes:
// Object parsed from JSON data. var translations = { "global": { "content": { "loading": "Loading...", "sample_text": "Lorem ipsum dolor sit amet.", } }, "other": { "test": { "test": "THIS IS A TEST" } } }; // Loop through each var element. [].forEach.call(document.getElementsByTagName('var'), function (translate) { // Parse the translation path. var path = translate .textContent .trim() .toLowerCase() .split('.'); try { // Assumed that every translation is three levels deep, else print empty string. translate.textContent = path.length === 3 ? translations[path[0]][path[1]][path[2]] : ''; } catch (e) { // Log errors to console if any, and use empty string instead of translation. console.error(e); translate.textContent = ''; } });
<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>
solution2
1 ACCPTED 2017-07-24 20:41:43
Using javascript new Function method
//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>
solution3
0 2017-07-24 19:34:15
Use document.getElementsByTagName('var') to retrieve all tags var . And use either innerText (if your templates only contais plain text) or innerHTML (if your templates contains HTML) to read out and modify the inner content.
var allVars = document.getElementsByTagName('var');
for(var i = 0; i < allVars.length; i++) {
var thisVar = allVars[i];
alert(thisVar.innerText);
thisVar.innerText = 'Hi there';
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.