Exemple d'internationalisation (i18n) en Javascript, JSON et HTML simple

<!DOCTYPE html>
<html lang="fr">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title class="page-title">Document</title>
</head>

<body>

    <select id="lang" onchange="translatePage(value)">
        <option value="fr-FR">Français</option>
        <option value="en-GB">English (GB)</option>
        <option value="en-US">English (US)</option>
        <option value="de-DE">Deutsch</option>
    </select>

    <h1 class="page-title"></h1>
    <h2 class="section-title"></h2>
    <p class="paragraph"></p>
    <p class="paragraph"></p>

    <script>

        /* Toutes les traductions */
        lang = {
            "fr-FR": [
                { "i18nID": "page-title", "i18nString": "Titre de la page" },
                { "i18nID": "section-title", "i18nString": "Titre de la section" },
                { "i18nID": "paragraph", "i18nString": "Paragraphe" }
            ],
            "en-GB": [
                { "i18nID": "page-title", "i18nString": "Page title" },
                { "i18nID": "section-title", "i18nString": "Section title" },
                { "i18nID": "paragraph", "i18nString": "Paragraph" }
            ]
        };

        /* Utilise la même traduction pour US et GB */
        lang["en-US"] = lang["en-GB"];

        /* Langue par défaut */
        defaultLangLocalisation = "fr-FR";

        /* Liste déroulante */
        selectLang = document.getElementById("lang");

        /* La langue du navigateur */
        var userLangLocalisation = navigator.language || navigator.userLanguage;

        /* Traduction de la page lors du chargement */
        translatePage(userLangLocalisation);

        /* Traduit la page */
        function translatePage(langLocalisation) {
            translations = chooseBestTranslation(langLocalisation);
            /* Change le contenu texte pour chaque classe dans le fichier JSON */
            translations.forEach(translation => {
                document.querySelectorAll("." + translation.i18nID).forEach(element => {
                    element.textContent = translation.i18nString;
                });
            });
        }

        /* Retourne la meilleure traduction selon la localisation linguistique */
        function chooseBestTranslation(langLocalisation) {
            translations = lang[langLocalisation];
            /* Si la langue n'est pas dans le JSON */
            if (translations == undefined) {
                selectLang.value = defaultLangLocalisation;
                /* retourne la langue par défaut */
                return lang[defaultLangLocalisation];
            }
            selectLang.value = langLocalisation;
            return translations;
        }

    </script>


</body>

</html>

Commentaires