Javascript 为什么我的跨度被剥掉了

我正在尝试删除div中出现的任何e\e：

HTML:

<div id="container" class="example">
  Some Example text
  <span class="abe">
    <span class="abe">
      this is an inner text of the span
    </span>
    text in the span
  </span>
</div>

$('div').each(function() {
    $this = $(this);
    $this.text($this.text().replace(/e|E/g, '')); // removes each e\E in the text
});​

function change(node) {
    if (node.nodeType == 3) {
        node.data = node.data.replace(/e|E/g, '');
    }
    else {
        $(node).contents().each(function() {
            change(this);
        });
    }
}

$('div').contents().each(function() {
    change(this);
});

<div class="example">Some Example text  
    <span class="abe">
        <span class="abe"> this is an inner text of the span </span>  text in the span 
    </span>
</div>
<div class="example">Some more Example text</div>​        
​

Javascript（jQuery）：

<div id="container" class="example">
  Some Example text
  <span class="abe">
    <span class="abe">
      this is an inner text of the span
    </span>
    text in the span
  </span>
</div>

$('div').each(function() {
    $this = $(this);
    $this.text($this.text().replace(/e|E/g, '')); // removes each e\E in the text
});​

function change(node) {
    if (node.nodeType == 3) {
        node.data = node.data.replace(/e|E/g, '');
    }
    else {
        $(node).contents().each(function() {
            change(this);
        });
    }
}

$('div').contents().each(function() {
    change(this);
});

<div class="example">Some Example text  
    <span class="abe">
        <span class="abe"> this is an inner text of the span </span>  text in the span 
    </span>
</div>
<div class="example">Some more Example text</div>​        
​

由于某些原因，我的跨度被剥离，只剩下内部文本。
为什么？我怎样才能修好它

---

更新：

<div id="container" class="example">
  Some Example text
  <span class="abe">
    <span class="abe">
      this is an inner text of the span
    </span>
    text in the span
  </span>
</div>

$('div').each(function() {
    $this = $(this);
    $this.text($this.text().replace(/e|E/g, '')); // removes each e\E in the text
});​

function change(node) {
    if (node.nodeType == 3) {
        node.data = node.data.replace(/e|E/g, '');
    }
    else {
        $(node).contents().each(function() {
            change(this);
        });
    }
}

$('div').contents().each(function() {
    change(this);
});

<div class="example">Some Example text  
    <span class="abe">
        <span class="abe"> this is an inner text of the span </span>  text in the span 
    </span>
</div>
<div class="example">Some more Example text</div>​        
​

我知道

text

只提供文本，我使用它是因为我不想更改标签属性。当我使用

.html

时，它将

更改为

---

设置textContent或innerText（这是

text（）

所做的）将从元素中删除所有标记

---

除此之外，您只需要首先获取文本（减去标记），然后将其放回。您以两种不同的方式删除了跨度。

正如其他人所指出的，

text（）

用纯文本替换元素的内容。您需要迭代元素中的文本节点，并使用每个文本节点的

data

或

nodeValue

属性替换其内容中的字符。下面介绍如何使用jQuery（使用改编自的代码）实现这一点为了清晰起见，e'和“e”字符被替换为“[X]”，但更改起来很简单

演示：

代码：

对于像我这样一般不使用jQuery的人，这里有一个没有jQuery的版本：

function replaceInTextNodes(node) {
    if (node.nodeType == 3) {
        node.data = node.data.replace(/e/ig, "[X]");
    } else {
        for (var i = 0, len = node.childNodes.length; i < len; ++i) {
            replaceInTextNodes(node.childNodes[i]);
        }
    }
}

replaceInTextNodes(document.getElementById("container"));

函数replaceInTextNodes（节点）{
if（node.nodeType==3）{
node.data=node.data.replace（/e/ig，“[X]”）；
}否则{
对于（变量i=0，len=node.childNodes.length；i

这是一个具有负前瞻性的解决方案

（？！…）

：
通过这种方式，我仅当

e

字符未包含在角括号中（作为标记名或属性名/值的子字符串）时，才应用替换字符

$（'div'）。每个（函数（）{
$this=$（this）；
$this.html（$this.html（）；
});

我找到了一种使用递归的方法：

Javascript:

<div id="container" class="example">
  Some Example text
  <span class="abe">
    <span class="abe">
      this is an inner text of the span
    </span>
    text in the span
  </span>
</div>

$('div').each(function() {
    $this = $(this);
    $this.text($this.text().replace(/e|E/g, '')); // removes each e\E in the text
});​

function change(node) {
    if (node.nodeType == 3) {
        node.data = node.data.replace(/e|E/g, '');
    }
    else {
        $(node).contents().each(function() {
            change(this);
        });
    }
}

$('div').contents().each(function() {
    change(this);
});

<div class="example">Some Example text  
    <span class="abe">
        <span class="abe"> this is an inner text of the span </span>  text in the span 
    </span>
</div>
<div class="example">Some more Example text</div>​        
​

基于此

HTML

：

<div id="container" class="example">
  Some Example text
  <span class="abe">
    <span class="abe">
      this is an inner text of the span
    </span>
    text in the span
  </span>
</div>

$('div').each(function() {
    $this = $(this);
    $this.text($this.text().replace(/e|E/g, '')); // removes each e\E in the text
});​

function change(node) {
    if (node.nodeType == 3) {
        node.data = node.data.replace(/e|E/g, '');
    }
    else {
        $(node).contents().each(function() {
            change(this);
        });
    }
}

$('div').contents().each(function() {
    change(this);
});

<div class="example">Some Example text  
    <span class="abe">
        <span class="abe"> this is an inner text of the span </span>  text in the span 
    </span>
</div>
<div class="example">Some more Example text</div>​        
​

一些示例文本
这是span中span文本的内部文本
更多示例文本​        
​

---

因为对内部$this.text（）的调用返回所有没有html元素的文本，然后将其分配回$this将不会使用

.html（）

生成相同的@tusar元素。但是它弄乱了标签本身，请检查。我用那把小提琴更新了我的答案。@tusar我用的是chrome，据我看，

是保留的检查我的更新，

.html

给了我标签，所以

变成了

。我不想碰标签，只是，它是内容。有什么想法吗？通过子节点循环。如果节点是标记，则递归。如果是文本节点，请替换。您可能对结果感兴趣。阅读评论。谢谢你的回答如果HTML包含应转义的未转义的

，该怎么办？kolink的要点很好：当然这是一种解决方法，它的使用取决于必须使用该regexp处理什么样的标记。我真的不建议使用regex解决方案：它不可靠、速度慢且过于复杂，而且简单，存在可靠的解决方案：迭代文本节点。@TimDown。事实上，你的第一个答案是最慢的…：）（使用jQuery）是最快的。你用纯javascript更新的速度比jQuery快（显然）。@gdoron:很公平，这是不使用regex的一个原因，只剩下大约99:）我认为

not（iframe）

应该是

not（span）

。另外，我不明白

nodeType

你想解释一下吗？哦，我没看到你的答案。在此期间，我用递归编写。看起来我做的工作太多了。@tusar:not（iframe）位用于避免

contents（）

试图遍历iframe文档。看

not（span）

将阻止在span内遍历文本节点，这不是必需的。至于

节点类型

，这是所有DOM节点的标准属性，文本节点的

节点类型

为3（也可作为

节点.text\u节点

，但旧版IE不支持节点常量）。参见@gdoron：我们的答案基本上使用相同的方法。这是最好的方法。@gdoron：最快的方法是基于普通DOM方法。我可以在我的回答中补充这一点。