使用Tampermonkey替换许多文本术语，而不影响url，也不查找类或id

Replace many text terms, using Tampermonkey, without affecting URLs and not looking for classes or ids

本文关键字：url 查找 id 影响 替换 Tampermonkey 许多 文本 术语 使用      更新时间：2023-09-26

我正在为一个流行的电子商务SAAS编写一个Google Chrome扩展，它将在其管理面板内将英文文本字符串替换为西班牙语。

我已经有了一个解决方案，它取代了一切，所以当找到一个href，它也取代了它不是想要的:

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

通过类或id获取元素并不容易维护，因为它们可能在平台不通知我们的情况下发生变化。我还计划添加更多的区域设置，所以任何关于如何以更干净的方式组织字符串的建议都将是伟大的。

避免丢弃URL、id、事件处理程序等;只需对web页面的TEXT_NODE进行操作。不要使用innerHTML

对文本节点进行操作的有效方法是使用Tree Walker。

对于替换项，使用数组。

把它们放在一起，代码看起来像这样: 
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;
}
相关文章：