Some Example text <...">
Clever Geek Handbook

Why is my coverage disabled

I'm trying to remove any e \ E event in a 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>

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

For some reason, my range will crash and only its inner text remains.
WHAT FOR? and how can i fix this?

Update:

I know text

it only gives text, I used it because I don't want to change the attributes of the tags. When I used .html

it changed <span id="abe">

to<span id="ab">

DEMO

+3


source to share


4 answers


As noted by others, text()

replaces the content of an element or elements with plain text. You need to iterate over the text nodes within the element and replace characters in their content using the data

or nodeValue

each text node property . Here's how to do it with jQuery (using code adapted from this question ). The 'e' and 'E' characters are replaced with "[X]" for clarity, but this is trivial to change.

Demo: http://jsfiddle.net/TqBLu/

code:



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

Here's a non-jQuery version for people like me who don't normally use it:

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"));
+4


source


Setting textContent or innerText (which it does text()

) removes all tags from that element.



Plus, you only get the text in the first place (minus the tags) and put it back in. You destroyed a range in two different ways.

+2


source


This is a negative-looking solution (?! ...)

: http://jsfiddle.net/Sqkud/1/
So I only apply character substitution e

if it is not contained within angular brackets (as tag substring or attribute name / value)

$('div').each(function() {
    $this = $(this);
    $this.html($this.html().replace(/(?!.*<.*[e]*.*>.*)e*/gi, ''));
});
0


source


I found a way to do it with recursion:

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

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

0


source






More articles:


All Articles