JSFiddle - React, Tailwind, and code Playground

by Sascha

HTML

<div id="sidebar-nav">
  <span>Test</span>
  <a>Groups</a>
  <div>
    Replace something in here.
  </div>
  <ul>
    <li><span>Required</span></li>
    <li><a href="?darin">Irgendwas</a></li>
  </ul>
</div>

JavaScript

translation = [];
translation.push({
  "Groups": "Gruppen"
});
translation.push({
  "something": "etwas"
});
translation.push({
  "in here": "darin"
});
translation.push({
  "Required": "Erforderlich"
});
translation.push({
  "Test": "Test2"
});

var elements = $('#sidebar-nav').find('a,li,div,span');
for (var i = 0; i < elements.length; i++) {
  var useHtml = true;
  try {
    elementText = elements[i].innerHTML;
  } catch (e) {
    elementText = elements[i].innerText;
    useHtml = false;
  }

  for (var j = 0; j < translation.length; j++) {
    var keyName = Object.keys(translation[j]);
    var translatedText= translation[j][keyName];
    elementText = elementText.replace(keyName, translation[j][keyName]);
  }
  if (useHtml) {
    elements[i].innerHTML = elementText;
  } else {
    elements[i].innerText = elementText;
  }
}