Łysy Łysy - 2 years ago 70
Javascript Question

How to get all strings and replace it with another from the database JavaScript

I apologize in advance for being weak English :(

My website looks like this:
https://scr.hu/LoDJpD



<div class="container-fluid">

<div class="col-sm-12 col-md-10 col-md-offset-1 col-lg-10 col-lg-offset-1 text-center">

<div class="card col-md-6 col-sm-6 row-2">
<div class="card-bg">
<div class="image" style="background-image: url('kwadrat.jpg');"></div>
<div class="title"><h1><hr>DNI OTWARTE<hr></h1></div>
<div id="big" class="text">@string/big</div>
</div>
</div>

<div class="card col-md-3 col-sm-3 row-2">
<div class="card-bg">
<div class="image" style="background-image: url('dlugi.jpg');"></div>
<div class="title"><h1><hr>PROJEKTY<br>UNIJNE<hr></h1></div>
<div id="small1" class="text">@string/small1</div>
</div>
</div>

<div class="card col-md-3 col-sm-3 row-2">
<div class="card-bg">
<div class="image" style="background-image: url('maly1.jpg');"></div>
<div class="title"><h1><hr>BUSINESS<br>ENGLISH<hr></h1></div>
<div id="small2" class="text">@string/small2</div>
</div>
</div>

<div class="card col-md-12 row-1">
<div class="card-bg">
<div class="image" style="background-image: url('banner.jpg');"></div>
<div class="title"><h1><hr>CZECHOMANIA<hr></h1></div>
<div id="bigwidth" class="text">@string/bigwidth</div>

</div>
</div>

</div>

</div>





I would like to convert the "@string/text" text to a variable from the database.
In the database, the variable also has the name "@string/text".
Right now I have a simple script, but I know it will be ineffective



text = document.getElementById("big").innerHTML;
lang = document.getElementById("jezyk");
function en(){
document.getElementById("jezyk").className="flag flag-gb";
}
function pl(){
document.getElementById("jezyk").className="flag flag-pl";
}
function useen(){
if(lang.className == "flag flag-gb" && text == "@string/big"){
document.getElementById("big").innerHTML="GB variable form database";
}
}
function usepl(){
if(lang.className == "flag flag-pl" && text == "@string/big"){
document.getElementById("big").innerHTML="PL variable form database";
}
}
setInterval(function jezyk(){
usepl();
useen();
jezyk();
}, 10);





Is there an easier way to retrieve text and replace it from the database?
Can somebody suggest some better and faster functions?

Answer Source

Use an object ( maybe retrieve it from server via JSON), like this:

var translate={
 lang:["en","pl"],
 values:{
  curr_lang:["english","polish"],
  info:["english text","polish text"]
 }
};

So you can easily display a language chooser:

translate.lang.map(function(language){
  var button=document.createElement("button");
  button.textContent=language;
  button.onclick=changeLanguage.bind(this,language);
  document.body/* or a custom element*/.appendChild(button);
});

Traversing the whole dom is not that fast, so may just do it once, and replace all @identifier@ with spans (may do this on serverside already and cache it):

 document.body.innerHTML=document.body.innerHTML.split("@").reduce(function(part,i){
   if(part%2===0) return part;
   return "<span id='"+part+"' class='replace'>...</span>";
 }).join("");

So the actual replacing is quite easy:

function changeLanguage(lang){
 var index=translate.lang.indexOf(lang);
 document.querySelectorAll(".replace").forEach(fumction(el){
  var select=el.id;
  el.textContent=(translate.values[select]||["error","error"])[index];
});
}

A sample text

This site is currently in @curr_lang@ ...
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download