I'm writing a Google Chrome extension for a popular e-commerce SAAS which will replace English text strings to Spanish inside its admin panel.
I've come with a solution which replaces EVERYTHING, so when finding an a href, it also replaces it which is not desired:
var els = document.getElementsByTagName("*");
for(var i = 0, l = els.length; i < l; i++) {
var el = els[i];
// ==Menu_left_dropdown==
el.innerHTML = el.innerHTML.replace(/View your user account/gi, 'Tu cuenta');
el.innerHTML = el.innerHTML.replace(/Terms of service/gi, 'Términos y condiciones');
el.innerHTML = el.innerHTML.replace(/Privacy policy/gi, 'Privacidad');
el.innerHTML = el.innerHTML.replace(/Log out/gi, 'Salir');
// ==Menu_left=
el.innerHTML = el.innerHTML.replace(/Search/gi, 'Buscar');
el.innerHTML = el.innerHTML.replace(/Dashboard/gi, 'Panel');
el.innerHTML = el.innerHTML.replace(/Orders/gi, 'Pedidos');
el.innerHTML = el.innerHTML.replace(/Customers/gi, 'Clientes');
el.innerHTML = el.innerHTML.replace(/Products/gi, 'Productos');
}
Getting elements by class or id, wouldn't be easy to maintain as they might change without the platform informing us. I also plan to add more locales so any suggestion on how to approach a cleaner way to organize the strings would be great.