Question

我正在尝试删除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>

CSS

span{color:blue;}

Javascript（jQuery）：

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

LIVE DEMO

出于某种原因，我的跨度被剥离，只剩下它的内部文本为什么？我该如何解决？

更新

我知道text只提供文字，我用过它，因为我不想改变标签属性。当我使用.html时，它将<span id="abe">更改为<span id="ab">

DEMO

Answer 1

正如其他人所指出的，text()用纯文本替换元素或元素的内容。您需要遍历元素中的文本节点，并使用每个文本节点的data或nodeValue属性替换其内容中的字符。以下是如何使用jQuery（使用从this question改编的代码）。＆＃39; E＆＃39;和＆＃39; E＆＃39;字符替换为＆＃39; [X]＆＃39;为了清楚起见，但改变是微不足道的。

演示：http://jsfiddle.net/TqBLu/

代码：

$("#container").find(":not(iframe)").andSelf().contents().each(function() {
    if (this.nodeType == 3) {
        this.data = this.data.replace(/e/ig, "[X]");
    }
});

这是一个没有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"));

Answer 2

设置textContent或innerText（这是text()所做的）会删除元素中的所有标记。

除此之外，你只是把文本放在第一位（减去标签），然后把它放回去。你用两种不同的方式消灭了这个范围。

Answer 3

这是一个带有否定预测的解决方案(?! ...)：http://jsfiddle.net/Sqkud/1/
这样，只有当e字符不包含在尖括号中时（作为标记名或属性名称/值的子字符串），我才应用$('div').each(function() { $this = $(this); $this.html($this.html().replace(/(?!.*<.*[e]*.*>.*)e*/gi, '')); });字符的替换。

{{1}}

Answer 4

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

<强>使用Javascript：

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);
});

基于此HTML：

<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>

LIVE DEMO

为什么我的跨度被剥夺了

4 个答案: