3

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.

Brock Adams
  • 90,639
  • 22
  • 233
  • 295
alexandresaiz
  • 2,678
  • 7
  • 29
  • 40
  • you can check for el.children, and if present, skip the text replacement on that non-child node. that should keep your href attribs intact. – dandavis Jun 25 '14 at 20:36

1 Answers1

13

To avoid trashing URL's, id's, event handler's, etc.; you need to act only on the TEXT_NODEs of a web page. Never use innerHTML.

An efficient way to act on text nodes is to use a Tree Walker.

For the replacement terms, use an array.

Putting it all together, the code looks like this:

var replaceArry = [
    [/View your user account/gi,    'Tu cuenta'],
    [/Terms of service/gi,          'Términos y condiciones'],
    [/Privacy policy/gi,            'Privacidad'],
    // etc.
];
var numTerms    = replaceArry.length;
var txtWalker   = document.createTreeWalker (
    document.body,
    NodeFilter.SHOW_TEXT,
    {   acceptNode: function (node) {
            //-- Skip whitespace-only nodes
            if (node.nodeValue.trim() )
                return NodeFilter.FILTER_ACCEPT;

            return NodeFilter.FILTER_SKIP;
        }
    },
    false
);
var txtNode     = null;

while (txtNode  = txtWalker.nextNode () ) {
    var oldTxt  = txtNode.nodeValue;

    for (var J  = 0;  J < numTerms;  J++) {
        oldTxt  = oldTxt.replace (replaceArry[J][0], replaceArry[J][1]);
    }
    txtNode.nodeValue = oldTxt;
}
Brock Adams
  • 90,639
  • 22
  • 233
  • 295
  • Works like a charm. Any idea on how to convert this into a Google Chorme extension? – alexandresaiz Jun 26 '14 at 20:27
  • Same [way you would convert any other userscript](http://stackoverflow.com/a/5259212/331508). But, beware, Chrome is busting this soon (forcing installs only via their store, etc.). You may be better off sticking with Tampermonkey. – Brock Adams Jun 26 '14 at 20:50
  • Would you know how to force tampermonkey to translate certain strings like: [/Search/gi,'Buscar'], is ok, but [/Search Engines/gi,'Motores de Búsqueda'], – alexandresaiz Oct 24 '14 at 08:32
  • If you mean translate a phrase sometimes but not others, how you do that depends exquisitely on the details. Worst case, you have to use a bunch of interlocking `if()` statements. Translation ain't easy. It's why Google struggles and the rest of us pay professional translators. – Brock Adams Oct 24 '14 at 08:42
  • I mean that Search "string" = Buscar (in spanish) but Search engines "string" = Motores de búsqueda in spanish. So tampermonkey finds the first Search and wen finds the second (search engines) outputs: Buscar engines. – alexandresaiz Oct 24 '14 at 08:49
  • You can stop some of that by carefully controlling the order of search/replace terms. But you're going to have to get dirty and, ultimately, machine translation has its limits. – Brock Adams Oct 24 '14 at 09:48