javascript - poner - Reemplace muchos términos de texto, usando Tampermonkey, sin afectar las URL y no buscando clases o ID

leer el contenido de un archivo en javascript

Question

Estoy escribiendo una extensión de Google Chrome para un popular SAAS de comercio electrónico que reemplazará las cadenas de texto en inglés al español dentro de su panel de administración.

He venido con una solución que reemplaza TODO, así que al encontrar un a href, también lo reemplaza lo que no se desea:

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'');
}

Obtener elementos por clase o ID no sería fácil de mantener, ya que podrían cambiar sin que la plataforma nos informe. También planeo agregar más lugares, así que cualquier sugerencia sobre cómo abordar una forma más limpia de organizar las cadenas sería genial.

Answer 1

Para evitar la destrucción de URL''s, id''s, manejadores de eventos, etc .; necesita actuar solo en TEXT_NODE de una página web. Nunca use innerHTML .

Una forma eficiente de actuar sobre los nodos de texto es usar un Tree Walker .

Para los términos de reemplazo, use una matriz.

Poniéndolo todo junto, el código se ve así:

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;
}