Einfachste Möglichkeit in Javascript eine Multi-Sprach-Seite zu erstellen | 19.04.2023
Hallo liebe Leserinnen und Leser! In diesem Blogpost möchte ich euch zeigen, wie ihr mit einem einfachen JavaScript-Ansatz eine mehrsprachige Webseite erstellen könnt. Tatsächlich ist es sehr einfach und schnell gemacht.
Die Idee ist, dass ihr die Website in der Sprache eurer Wahl gestaltet. Über die CSS-Selektoren könnt ihr später dann die Elemente austauschen. Gehen wir mal von diesem Markup aus:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Install</title>
</head>
<body>
<h1>Setup</h1>
<p class="fancy">I'm text</p>
<hr />
<select aria-label="Choose the language of the setup" id="languageSelector">
<option selected>Other Language</option>
</select>
</body>
</html>
Zunächst definieren wir ein Objekt namens languages, das die Übersetzungen für verschiedene Sprachen enthält. In diesem Beispiel verwenden wir Englisch (en) und Deutsch (de) als verfügbare Sprachen:
const languages = {
"en": {
"name": "English",
"translations": {
"h1": "Setup in English"
}
},
"de": {
"name": "Deutsch",
"translations": {
"h1": "Einrichtung in Deutsch",
"p.fancy": "Ich bin Text"
}
}
};
Als Nächstes setzen wir eine Standardsprache, in diesem Fall Englisch:
const default_language = "en";
Wir ermitteln dann die bevorzugte Sprache des Browsers des Benutzers mit navigator.language oder navigator.userLanguage:
const browserLanguage = navigator.language || navigator.userLanguage;
Die Funktion loadLanguage ist verantwortlich für das Aktualisieren der Webseite mit den Übersetzungen der ausgewählten Sprache:
const loadLanguage = (language) => {
const translations = language.translations;
document.querySelector("html").setAttribute("lang", language.name);
for(let key in translations) {
const value = translations[key];
const elements = document.querySelectorAll(key);
// Put original value into default
if(typeof languages[default_language].translations[key] === "undefined") {
if(elements.length > 1) {
languages[default_language].translations[key] = [];
for(let i = 0; i < elements.length; i++) {
languages[default_language].translations[key].push(elements[i].innerHTML);
}
} else {
languages[default_language].translations[key] = elements[0].innerHTML;
}
}
for(let i = 0; i < elements.length; i++) {
const element = elements[i];
element.innerHTML = value;
}
}
}
Um eine Sprachauswahl für die Benutzerinnen und Benutzer bereitzustellen, erstellen wir ein Dropdown-Menü und füllen es mit den verfügbaren Sprachen:
const languageSelector = document.getElementById("languageSelector");
for(let key in languages) {
const language = languages[key];
const option = document.createElement("option");
option.value = key;
option.innerHTML = language.name;
languageSelector.appendChild(option);
}
Wir fügen dann einen Event-Listener hinzu, der bei Änderung der ausgewählten Sprache im Dropdown-Menü die Funktion loadLanguage aufruft:
languageSelector.addEventListener("change", (event) => {
const language = languages[event.target.value];
loadLanguage(language);
});
Zum Schluss laden wir die Sprache, basierend auf der vom Browser bevorzugten Sprache. Wenn diese Sprache nicht verfügbar ist, verwenden wir die Standardsprache:
if(languages[browserLanguage]) {
loadLanguage(languages[browserLanguage]);
} else {
loadLanguage(languages[default_language]);
}
Das war's schon! Mit diesem einfachen JavaScript-Ansatz könnt ihr eure Webseite mehrsprachig gestalten. Viel Spaß beim Ausprobieren und Erweitern eurer eigenen Projekte! Das Ganze habe ich hier auf jsfiddle mal zusammengeschrieben.