JSFiddle - React, Tailwind, and code Playground

HTML

<div class="template"><div>{{Goodbye}}, {{castle}}</div></div>
<div id="translation"><div>

CSS

.template {
    display: none;
}

JavaScript

var dict = {
    en: {
        'Hallo': 'Hallo',
            'Goodbye': 'Goodbye',
            'castle': 'castle'
    },
    fr: {
        'Hallo': 'Bonjour',
            'Goodbye': 'Au revoir',
            'castle': 'chateau'
    },
    de: {
        'Hallo': 'Hallo',
            'Goodbye': 'Auf Wiedersehen',
            'castle': 'schloss'
    }
}

var lang = 'fr';
//var tmpl = '<div>{{Goodbye}}, {{castle}}</div>';

function translate(dict, lang, word) {
    return dict[lang][word];
}

function applyTemplate(tmpl, lang) {
    var regex = /\{\{([a-zA-Z])\w+\}\}/g
    return tmpl.replace(regex, function (word) {
        return translate(dict, lang, word.replace(/[\{\}]/g, ''));
    });
}

var tmpl = document.querySelector('.template').textContent;
var translation  = document.querySelector('#translation');
var html = applyTemplate(tmpl, lang);
translation.insertAdjacentHTML('afterbegin', html);