替换html标记中的文本而不影响标记属性和链接

Question

我想替换代码中的特定单词而不影响html URL和属性。 我试图替换每个p标签，但div标签中有一些内容也需要更换。

$("p:not(:has(img))").each(function(){
    var b = $(this).html().replace(/oldtext/g, "newtext");
    $(this).html(b);  
});

Answer 1

我为你写了一个vanilla JavaScript函数，除了oldtext到newtext没有任何改变：

replaceAllTextWith = function (jq, oldtxt, newtxt) {
    for (var j = 0; j < jq.length; j++) {
        var el = jq[j];
        for (var i = 0; i < el.childNodes.length; i++) {
            var cnode = el.childNodes[i];
            if (cnode.nodeType == 3) {
                console.log(el.tagName);
                var nval = cnode.nodeValue;
                //add .toLowerCase() here if you want to consider capital letters
                if (-1 < nval.indexOf(oldtxt)) {
                    cnode.nodeValue = nval.replace(new RegExp(oldtxt, "g"), newtxt);
                }
            } else if (cnode.nodeType == 1) {
                replaceAllTextWith([cnode], oldtxt, newtxt);
            }
        }
    }
};

你可以称之为：

replaceAllTextWith($("p:not(:has(img))"), "oldtext", "newtext")

Answer 2

这是一个有趣的任务，因为jquery的html()只显示选择器内的html，但不显示嵌套元素的html

解决方案是逐行分解html代码（块）并检查是否存在某个元素（img），以便执行替换。

这是html：

<div id="a_unique_wrap_id">
<p><img src="https://www.google.pt/images/srpr/logo11w.png" /><h1>abc</h1></p>
<p><img src="https://www.google.pt/images/srpr/logo11w.png" />def</p>
<p><h1><span><b>abc</b></span></h1></p>
<div><h1><span><b>abc</b></span></h1></div>
<div><h1><span><b>def</b></span></h1></div>
</div>

这是javascript：

selector=$('div');
exclude='<img';

str=(selector.html().split('\n'));
l=str.length;
output='';
for(x=0;x<l;x++){
    if(str[x].indexOf(exclude)>=0){
        output+=str[x];       
    }else output+=str[x].replace(/abc/g, "newtext");
}
$('#a_unique_wrap_id').html(output);

一个工作的例子在这里： http ： //jsfiddle.net/hbrunar/w6BfL/6/