I'm trying to make my small website multilingual, and after testing many options, this script seems to be the best: ( https://jsfiddle.net/imihandstand/fh1rcy97/1/ . Source: https://stackoverflow.com/a/47612798/4024828 )
<script>
var LanguageList = {
"EN" : "English",
"ES" : "Español"
};
//languages Objects
var WORDS_EN = {
"text1" : "text One",
"text2" : "<b>text Two</b>"
};
var WORDS_ES = {
"text1" : "texto Un",
"text2" : "<b>texto Dos</b>"
};
window.onload = initialize;
function initialize() {
var $dropdown = $("#country_select");
$.each(LanguageList, function(key, value) {
$dropdown.
append($("<option/>").
val(key).
text(value));
});
loadsLanguage("EN");
}
function loadsLanguage(lang){
/*fills all the span tags with class=lang pattern*/
$('span[class^="lang"]').each(function(){
var LangVar = (this.className).replace('lang-','');
var Text = window["WORDS_"+lang][LangVar];
$(this).text(Text);
});
}
</script>
<select id="country_select" onchange="loadsLanguage(this.value);">
</select>
<div>
<span class="lang-text1"></span>
</div>
<div>
<span class="lang-text2"></span>
</div>
<div>
<span class="lang-text2"></span>/<span class="lang-text2"></span>
</div>
But I have one huge issue with it: It does not care about HTML-tags I use in it - but I would need that. So text in <b> should be shown as bold, etc.
How could I change this script to make it use the HTML-tags? I tried for 2-3 hours and I'm unable to solve it...
Thank you very much!