JSFiddle - React, Tailwind, and code Playground

by David Thomas

HTML

<fieldset>
    <button id="trigger">Change selected words into 'dh'</button>
</fieldset>
<div class="OutLbl">A Search through some arbitrary text By a JavaScript RegExp, Which requires the user to Select Language and, possibly, specify an ID.</div>

CSS

.OutLbl {
    border: 2px solid #f90;
    width: 80%;
    margin: 1em auto;
    padding: 0.5em;
    border-radius: 1em;
    font-size: 1.2em;
}

JavaScript

var diction = {
    wordlist: {
        "Search": {
            dh: "ހޯދާ",
            en: "Search"
        },
        "By": {
            dh: "އިން",
            en: "by"
        },
        "Select Language": {
            dh: "ބަސް ޙިޔާރުކުރޭ",
            en: "Select Language"
        },
        "ID": {
            dh: "އައިޑީ",
            en: "ID"
        }
    }
};

function lang(t) {
    var words = [];
    for (var word in diction.wordlist) {
        if (diction.wordlist.hasOwnProperty(word)) {
            words.push(word);
        }
    }
    var reg = new RegExp('(' + words.join(')|(') + ')', 'gi');
    $('.OutLbl ').html(function (index, oldhtml) {
        return oldhtml.replace(reg, function (matchedWord) {
            return diction.wordlist[matchedWord][t];
        });
    });
}

$('#trigger').on('click', function(e){
    e.preventDefault();
    lang('dh');
});