nicht angemeldet
Hi zusammen,
ich war auf der Suche nach einem passenden Javascript-Code, mit dem ich eine bestehende kleine Webapp relativ schnell (OHNE Datenbank-Anbindung und OHNE extra Dateien (wie z.B. JSON)) auf Knopfdruck übersetzen lassen kann. In meinem Fall gehts um ein paar HTML Seiten, die auf einem ESP32 Mikrocontroller per Webserver dargestellt werden. Das Ganze soll auch ohne Internetverbindung funktionieren.
Da ich nichts passendes gefunden habe, habe ich mich einfach mal selber drangesetzt und ein paar Zeilen Code geschrieben.
Wäre nett, wenn ihr Profis mal drüber schaut, ob man da noch was verbessern kann. Hier ist mein Versuch:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Language-Test</title>
</head>
<body>
<select onchange="changeLang(this.value);">
<option value="">Bitte wählen</option>
<option value="0">Deutsch</option>
<option value="1">Englisch</option>
<option value="2">Spanisch</option>
</select>
<div id="translation_area">
<div class="card-header">
<h1>Herzlich Willkommen</h1>
</div>
<div class="card-body" style="text-align:center;">
<div class="welcome_message">
<div style="border:1px solid #000;padding:10px;">
<p>Hier steht ein beliebiger <a href="/ersterLink">Text</a> mit jede Menge Verlinkungen und HTML-Tags</p>
<p>Die Übersetzung des Textes wird <a href="/andererLink">aus einem Javascript Array</a> je nach gewählter Sprache geladen.</p>
<button class="btn-small">Links und Layout bleiben erhalten</button>
</div>
</div>
</div>
</div>
</body>
<script>
// Text-Arrays
var text_arr = [
{"text" : "Herzlich Willkommen", "translation_en" : "Welcome to our website", "translation_es" : "Una cálida bienvenida"},
{"text" : "Hier steht ein beliebiger", "translation_en" : "Here is an arbitrary", "translation_es" : "Aquí tienes un"},
{"text" : "Text", "translation_en" : "text", "translation_es" : "texto"},
{"text" : "mit jede Menge Verlinkungen und HTML-Tags", "translation_en" : "with lots of links and HTML tags", "translation_es" : "arbitrario con muchos enlaces y etiquetas HTML"},
{"text" : "La traducción del texto se carga", "translation_en" : "The translation of the text is loaded", "translation_es" : ""},
{"text" : "aus einem Javascript Array", "translation_en" : "from a Javascript array ", "translation_es" : "desde un array de Javascript"},
{"text" : "je nach gewählter Sprache geladen.", "translation_en" : "depending on the selected language.", "translation_es" : "en función del idioma seleccionado."},
{"text" : "Links und Layout bleiben erhalten", "translation_en" : "Links and layout remain", "translation_es" : "Los enlaces y el diseño siguen siendo los mismos"},
];
var setLang = localStorage.getItem("setLang");
if (setLang=="") {
setLang=0;
}
load_langTexte(setLang, "translation_area")
function load_langTexte(newLang, div_area) {
newLang = parseInt(newLang);
if (newLang >0) {
setLang=newLang;
const elements = document.querySelectorAll('#'+div_area);
var original_code="";
elements.forEach(element => {
var el_split=element.innerHTML.split("\n");
el_split.forEach(element_split => {
var original_text="";
var translated_string="";
var tmp_string="";
var text_translation="";
let strippedString = element_split.replace(/(<([^>]+)>)/gi, "*");
if (strippedString.trim()=="*") {
// Es handelt sich nur um einen Tag, daher wird nichts übersetzt
translated_string=element_split;
} else {
tmp_string=element_split;
var el_split_final=strippedString.split("*");
el_split_final.forEach(strString => {
if (strString.trim() != "") {
original_text=strString.trim();
var austauschtext=text_arr.filter(function (text_part) { return text_part.text == original_text });
austauschtext.forEach(function (item, index) {
switch (setLang) {
case 1:
text_translation=item.translation_en;
break;
case 2:
text_translation=item.translation_es;
break;
}
});
if (austauschtext!="") {
tmp_string=tmp_string.replace(original_text, text_translation);
} else {
// Nur für Entwicklung: alle nicht gefundenen Texte werden in Console als leeres Objekt vorbereitet eingeblendet
// Dann kann man den Array gleich in den Code kopieren und alle Übersetzungen einbauen (ich nutze www.deepl.com)
console.log('{"text" : "' +original_text+ '", "translation_en" : "", "translation_es" : ""},');
}
}
});
translated_string=tmp_string;
}
original_code += translated_string;
});
});
document.getElementById(div_area).innerHTML=original_code;
}
}
function changeLang(newLang) {
localStorage.setItem("setLang", newLang);
window.location.reload();
}
</script>
</html>
Die zuletzt gewählte Sprache wird im localStorage gespeichert, sodass beim neuen Laden der Seite automatisch die richtige Sprache angezeigt wird.
Mir war es außerdem wichtig, dass ich jederzeit an den HTML Tags Änderungen machen kann und die Funktionalität davon unberührt bleibt.
Mich würde aber mal interessieren, ob man sowas smarter machen kann und vor allem, ob das Cross-Browser-tauglich ist.
LG Daniel
Der Martin
Gunnar Bittersmann
Auge