Javascript jquery：仅在文本节点上进行替换

我试图将文本解析为html，进行一些更改，然后再次返回纯文本

我将要做的更改是基本上用另一个术语替换某个术语（例如

'old'

为

'new'

）

我只想更改文本类型，不想更改html元素的属性和属性（例如，

href

值不应更改）

请参阅代码：

h= '<span myAtrib="something"><a href="old(this SHOULD NOT be changed)">old(this SHOULD be changed)</a></span>';

h=$("<div>"+ h +"</div>").find('span[myAtrib="something"]').html(function (i, oldHtml) {
    oldHtml = oldHtml.replace(/old/g, 'new');
return oldHtml;
}).end().html();

h=''；
h=$（“+h+”）.find（'span[myAtrib=“something”]'）.html（函数（i，oldHtml）{
oldHtml=oldHtml.replace（/old/g，'new'）；
返回oldHtml；
}).end（）.html（）；

我应该如何使替换只发生在文本节点上，或者至少，我应该如何过滤掉锚元素

如何仅在文本节点上进行替换

通过递归迭代所有子节点/子节点并测试该节点是否为文本节点：

function replace($element, from, to) {
    $element.contents().each(function() {
        if (this.nodeType === 3) { // text node
            this.nodeValue = this.nodeValue.replace(from, to);
        }
        else if (this.nodeType === 1) { // element node
            replace($(this), from, to);
        }
    });
}
var $ele = $("<div>"+ h +"</div>").find('span[myAtrib="something"]')
replace($ele, /old/g, "new");
var html = $ele.end().html();

函数替换（$element，from，to）{
$element.contents（）.each（函数（））{
如果（this.nodeType==3）{//text节点
this.nodeValue=this.nodeValue.replace（从，到）；
}
else如果（this.nodeType==1）{//元素节点
替换（$（本）、从、到）；
}
});
}
var$ele=$（“”+h+“”）。find（'span[myAtrib=“something”]”）
替换（$ele，/old/g，“new”）；
var html=$ele.end（）.html（）；

您也可以在没有jQuery的情况下轻松完成这项工作

如何仅在文本节点上进行替换

通过递归迭代所有子节点/子节点并测试该节点是否为文本节点：

function replace($element, from, to) {
    $element.contents().each(function() {
        if (this.nodeType === 3) { // text node
            this.nodeValue = this.nodeValue.replace(from, to);
        }
        else if (this.nodeType === 1) { // element node
            replace($(this), from, to);
        }
    });
}
var $ele = $("<div>"+ h +"</div>").find('span[myAtrib="something"]')
replace($ele, /old/g, "new");
var html = $ele.end().html();

函数替换（$element，from，to）{
$element.contents（）.each（函数（））{
如果（this.nodeType==3）{//text节点
this.nodeValue=this.nodeValue.replace（从，到）；
}
else如果（this.nodeType==1）{//元素节点
替换（$（本）、从、到）；
}
});
}
var$ele=$（“”+h+“”）。find（'span[myAtrib=“something”]”）
替换（$ele，/old/g，“new”）；
var html=$ele.end（）.html（）；

您也可以在没有jQuery的情况下轻松完成这项工作

如何仅在文本节点上进行替换

通过递归迭代所有子节点/子节点并测试该节点是否为文本节点：

function replace($element, from, to) {
    $element.contents().each(function() {
        if (this.nodeType === 3) { // text node
            this.nodeValue = this.nodeValue.replace(from, to);
        }
        else if (this.nodeType === 1) { // element node
            replace($(this), from, to);
        }
    });
}
var $ele = $("<div>"+ h +"</div>").find('span[myAtrib="something"]')
replace($ele, /old/g, "new");
var html = $ele.end().html();

函数替换（$element，from，to）{
$element.contents（）.each（函数（））{
如果（this.nodeType==3）{//text节点
this.nodeValue=this.nodeValue.replace（从，到）；
}
else如果（this.nodeType==1）{//元素节点
替换（$（本）、从、到）；
}
});
}
var$ele=$（“”+h+“”）。find（'span[myAtrib=“something”]”）
替换（$ele，/old/g，“new”）；
var html=$ele.end（）.html（）；

您也可以在没有jQuery的情况下轻松完成这项工作

如何仅在文本节点上进行替换

通过递归迭代所有子节点/子节点并测试该节点是否为文本节点：

function replace($element, from, to) {
    $element.contents().each(function() {
        if (this.nodeType === 3) { // text node
            this.nodeValue = this.nodeValue.replace(from, to);
        }
        else if (this.nodeType === 1) { // element node
            replace($(this), from, to);
        }
    });
}
var $ele = $("<div>"+ h +"</div>").find('span[myAtrib="something"]')
replace($ele, /old/g, "new");
var html = $ele.end().html();

函数替换（$element，from，to）{
$element.contents（）.each（函数（））{
如果（this.nodeType==3）{//text节点
this.nodeValue=this.nodeValue.replace（从，到）；
}
else如果（this.nodeType==1）{//元素节点
替换（$（本）、从、到）；
}
});
}
var$ele=$（“”+h+“”）。find（'span[myAtrib=“something”]”）
替换（$ele，/old/g，“new”）；
var html=$ele.end（）.html（）；

---

您也可以在没有jQuery的情况下轻松做到这一点。

另一种方法是

h = $("<div id='root'>" + h + "</div>").find('span[myAtrib="something"]').find('*').addBack().contents().each(function () {
    if (this.nodeType == 3 && $.trim(this.nodeValue) != '') {
        this.nodeValue = this.nodeValue.replace(/old/g, 'new')
    }
}).end().end().end().end().html();

h=$（“+h+”）.find（'span[myAtrib=“something”]'）.find（'*'）.addBack（）.contents（）.each（函数）（）{
if（this.nodeType==3&&$.trim（this.nodeValue）！=''）{
this.nodeValue=this.nodeValue.replace（/old/g，“new”）
}
}).end（）.end（）.end（）.end（）.end（）.html（）；

---

演示：

另一种方法是

h = $("<div id='root'>" + h + "</div>").find('span[myAtrib="something"]').find('*').addBack().contents().each(function () {
    if (this.nodeType == 3 && $.trim(this.nodeValue) != '') {
        this.nodeValue = this.nodeValue.replace(/old/g, 'new')
    }
}).end().end().end().end().html();

h=$（“+h+”）.find（'span[myAtrib=“something”]'）.find（'*'）.addBack（）.contents（）.each（函数）（）{
if（this.nodeType==3&&$.trim（this.nodeValue）！=''）{
this.nodeValue=this.nodeValue.replace（/old/g，“new”）
}
}).end（）.end（）.end（）.end（）.end（）.html（）；

---

演示：

另一种方法是

h = $("<div id='root'>" + h + "</div>").find('span[myAtrib="something"]').find('*').addBack().contents().each(function () {
    if (this.nodeType == 3 && $.trim(this.nodeValue) != '') {
        this.nodeValue = this.nodeValue.replace(/old/g, 'new')
    }
}).end().end().end().end().html();

h=$（“+h+”）.find（'span[myAtrib=“something”]'）.find（'*'）.addBack（）.contents（）.each（函数）（）{
if（this.nodeType==3&&$.trim（this.nodeValue）！=''）{
this.nodeValue=this.nodeValue.replace（/old/g，“new”）
}
}).end（）.end（）.end（）.end（）.end（）.html（）；

---

演示：

另一种方法是

h = $("<div id='root'>" + h + "</div>").find('span[myAtrib="something"]').find('*').addBack().contents().each(function () {
    if (this.nodeType == 3 && $.trim(this.nodeValue) != '') {
        this.nodeValue = this.nodeValue.replace(/old/g, 'new')
    }
}).end().end().end().end().html();

h=$（“+h+”）.find（'span[myAtrib=“something”]'）.find（'*'）.addBack（）.contents（）.each（函数）（）{
if（this.nodeType==3&&$.trim（this.nodeValue）！=''）{
this.nodeValue=this.nodeValue.replace（/old/g，“new”）
}
}).end（）.end（）.end（）.end（）.end（）.html（）；

---

演示：

@adeneo，是的，我读过这个答案，并且非常喜欢它。但我不知道这和我的问题有什么关系。我不认为我在用正则表达式解析html…@adeneo，是的，我读过这个答案，并且非常喜欢它。但我不知道这和我的问题有什么关系。我不认为我在用正则表达式解析html…@adeneo，是的，我读过这个答案，并且非常喜欢它。但我不知道这和我的问题有什么关系。我不认为我在用正则表达式解析html…@adeneo，是的，我读过这个答案，并且非常喜欢它。但我不知道这和我的问题有什么关系。我不认为我是在用正则表达式解析html…你是否发现-removed-the-filter+循环有任何主要的性能问题看起来还可以。我只是不喜欢

。一般来说，查找（'*'）

，特别是如果你不知道HTML是如何构造的。你是否看到-removed the filter+循环有任何主要的性能问题。我只是不喜欢

.find（'*'）

一般来说，