用于检查每个元素并替换文本的 jQuery 或 Javascript 或 php 脚本

Question

我正在寻找一个脚本来搜索和替换服务器端或客户端的文本。

虽然用 PHP 替换字符串中的所有文本或用 jQuery/Javascript 替换页面上的所有文本很简单，但我无法弄清楚如何使脚本根据类忽略某些文本部分父元素。

考虑以下情况：

<div>
    <span>
        This keyword should be replaced.  
    </span>
    <span class="ignore"> 
        this keyword should be ignored.  
    </span>
    <span> 
        This keyword should be replaced.  
        <span class="ignore"> 
            this keyword should be ignored.  
        </span>
    </span>
    <span class="ignore">
        this keyword should be ignored because of class name.  
        <span> 
            this keyword should also be ignored because it's a child of an ignored element.  
        </span>
    </span>
</div>

如果我想用“cow”代替“keyword”这个词，预期的结果应该是：

<div>
    <span>
        This cow should be replaced.  
    </span>
    <span class="ignore"> 
        this keyword should be ignored.  
    </span>
    <span> 
        This cow should be replaced.  
        <span class="ignore"> 
            this keyword should be ignored.  
        </span>
    </span>
    <span class="ignore">
        this keyword should be ignored because of class name.  
        <span> 
            this keyword should also be ignored because it's a child of an ignored element.  
        </span>
    </span>
</div>

到目前为止，我想出的最简单的逻辑是 1.递归检查每个子节点 和 2.要么替换节点文本 或者 3. 如果找到“ignore”类，则忽略节点及其子节点。

我仍在尝试找到执行此操作的 jQuery 语法。任何可以帮助我指出正确方向或有任何意见的人，我都将不胜感激。

谢谢

Answer 1

虽然 Ojay 的解决方案也有效，但我最终还是使用了 Arun P Johny 的解决方案的轻微衍生产品，因为 jQuery 库已经链接在标题中。它比我原来的逻辑更有效，因为不需要显式递归。

我会在这里再次分享，以防其他人有类似的需求。

$('*').not('.ignore, .ignore *').contents().each(function () { //select all nodes except for those with the class ignore

    if (this.nodeType == 3) { //if this is a text node
        this.nodeValue = this.nodeValue.replace(/keyword/g, 'cow'); //replace text
    }
}) 

感谢大家及时和专业的意见。

Answer 2

类似的东西

function replaceKeywords(keyword, newWord) {
    for (var i = 0; i < document.childNodes.length; i++) {
        checkNode(document.childNodes[i]);
    }
    function checkNode(node) {
        var nodeName = node.nodeName.toLowerCase();
        if (nodeName === 'script' || nodeName === 'style' || ~(node.className || "").indexOf('ignore')) { return; }
        if (node.nodeType === 3) {
            var text = node.nodeValue;
            var regEx = new RegExp(keyword, 'gi');
            var newText = text.replace(regEx, newWord);
            node.nodeValue = newText;
        }
        if (node.childNodes.length > 0) {
            for (var j = 0; j < node.childNodes.length; j++) {
                checkNode(node.childNodes[j]);
            }
        }
    }
}

//Use like
replaceKeywords('keyword','cow');

使用 javascript 遍历整个 DOM 树，专门寻找 textNodes (nodeType 3) 并使用正则表达式将关键字替换为 newWord（忽略大小写），然后递归遍历每个节点的子节点。忽略 <script>、<style> 和类为 ignore 的元素。