使用子JavaScript/jQuery交换DOM元素中的文本

所以我有一个DOM元素，看起来像这样：

<span>text</span>
<b>some more text</b>
even more text here
<div>maybe some text here</div>

<span>text</span>
<b>some more text</b>
even more *candy* here
<div>maybe some text here</div>

我已经尝试用regex替换

。但是它会替换所有出现的文本

我也不知道没有标签的文本会在哪里。它可能处于中间，在开始或结束时（基本上在任何地方），我也不能删除子节点，因为我不知道它们的位置，并且如果存在“<代码> <代码>子”，当我在所有文本操作结束时再次添加它时，它可能会重新运行。
有人能给我指出正确的方向吗？
您可以检查节点的
nodeType
属性：

$('#parent').contents().each(function() {
   if (this.nodeType === 3) {
      this.nodeValue = this.nodeValue.replace('text', 'candy');
   }
});

如果要用HTML替换文本，可以使用
replaceWith
方法：

$('#parent').contents().filter(function() {
   return this.nodeType === 3 && this.nodeValue.indexOf('text') > -1;
}).replaceWith(function() {
    return this.nodeValue.replace(/(text)/g, '<strong>candy</strong>');
});

$（'#父'）.contents（）.filter（函数（）{
返回this.nodeType===3&&this.nodeValue.indexOf（'text'）>-1；
}).replaceWith（函数（）{
返回此.nodeValue.replace（/（text）/g，“candy”）；
});
您可以检查节点的
节点类型
属性：

$('#parent').contents().each(function() {
   if (this.nodeType === 3) {
      this.nodeValue = this.nodeValue.replace('text', 'candy');
   }
});

如果要用HTML替换文本，可以使用
replaceWith
方法：

$('#parent').contents().filter(function() {
   return this.nodeType === 3 && this.nodeValue.indexOf('text') > -1;
}).replaceWith(function() {
    return this.nodeValue.replace(/(text)/g, '<strong>candy</strong>');
});

$（'#父'）.contents（）.filter（函数（）{
返回this.nodeType===3&&this.nodeValue.indexOf（'text'）>-1；
}).replaceWith（函数（）{
返回此.nodeValue.replace（/（text）/g，“candy”）；
});
看来我是被按到按钮上了，所以这里有另一种方法。我假设所有这些元素都包含在某种父元素中，比如“enclosingDiv”。如果是这样，一个简单的答案是：

    var e = document.getELmentById('enclosingDiv');

    var divAsString = String(e);
    var newDivAsString = divAsString.replace('text', 'candy');
    e.innerHTML = newDivAsString;

看来我被打败了，所以这里有另一种方法。我假设所有这些元素都包含在某种父元素中，比如“enclosingDiv”。如果是这样，一个简单的答案是：

    var e = document.getELmentById('enclosingDiv');

    var divAsString = String(e);
    var newDivAsString = divAsString.replace('text', 'candy');
    e.innerHTML = newDivAsString;

这真是太棒了！！！如果我还想把它换成糖果，并把它也渲染出来呢？似乎
this
没有我可以使用的
.innerHTML
。@Andriy是的，textNodes没有
innerHTML
属性。您可以用修改后的值替换textNode。这非常有效！！！如果我还想把它换成糖果，并把它也渲染出来呢？似乎
this
没有我可以使用的
.innerHTML
。@Andriy是的，textNodes没有
innerHTML
属性。您可以用修改后的值替换textNode。如果父级
Div
没有id怎么办？那么最好使用undefined的答案。当我运行代码时，我得到以下信息：
[object XrayWrapper[object htmldevelment]]
你能告诉我我做错了什么吗？如果家长
Div
没有id怎么办？那么你最好使用undefined的答案。当我运行你的代码时，我得到以下信息：
[object XrayWrapper[object htmldevelment]
你能告诉我我做错了什么吗？