jquery exclude some child nodes from .text()

Question

The html structure looks like this

<div id="parent">
    parent may contain text
    <div id="child1">
       child 1 may contain text
       <script>console.log('i always contain something');</script>`
    </div>

    <div id="child2">
       child2 may contian text
    </div>    
</div>

I am trying to get contents of every node except the contents of <script>. The result should look like this:

    parent may contain text
    child 1 may contain text 
    child2 may contian text

I've tried using ($('#parent').not('div script').text() ,but it does not work

@ShaggyInjun - Your fiddle doesn't do anything. If you log the result of that JS it includes the contents of the `script` element (in Chrome at least). — James Allardice, Jun 30 '12 at 01:02
@ShaggyInjun - It does not work. It doesn't even include jQuery. If you do include jQuery, it just calls the method, but does nothing with the result. — James Allardice, Jun 30 '12 at 01:09
@ShaggyInjun - No problem :) At least it's a comment, not an answer. And you are correct in that the code in the question has a random parenthesis. — James Allardice, Jun 30 '12 at 01:21

score 7 · Answer 1 · answered Jun 30 '12 at 01:22

You can achieve that by cloning your node, removing the script tags and retrieving the text() value:

var content = $('#parent').clone();
content.find('script').remove();
console.log(content.text());

DEMO

You should clone the node in order to asure an unchanged DOM tree afterwards.

score 6 · Accepted Answer · edited Feb 26 '19 at 21:48

6

Try this:

($('#parent').text()).replace($('#parent script').text(),'');

Check out this Fiddle.

edited Feb 26 '19 at 21:48

Alexandre Aimbiré

1,494
2
14
26

answered Jun 30 '12 at 00:57

Muthukumar M

1,138
10
19

(1) Your fiddle does not include jQuery. (2) You've spelt `write` wrong so your fiddle throws a SyntaxError even if you include jQuery. (3) If you [fix both of those](http://jsfiddle.net/QLBvK/4/), the contents of the `script` element is written to the page. – James Allardice Jun 30 '12 at 01:00
Thanks! it works and is a quick fix, exactly what I'm looking for. – Survey Acct Jun 30 '12 at 01:43

Cranio · Answer 3 · 2012-06-30T01:31:51.753

4

This works for me and seems very generic [EDITED to make the procedure clearer]

var t = [];
$("#parent").each(function(i,e) 
    {if (e.nodeName!="SCRIPT") t.push(e.innerText);});
console.log(t);

Instead of console.log() you should obviously collect the strings in some other way (array?) to use them in your code.

http://jsfiddle.net/8eu4W/3/

edited Jun 30 '12 at 01:31

answered Jun 30 '12 at 01:09

Cranio

9,647
4
35
55

does not work because `#parent *` will not catch the text contained directly in the element – Alp Jun 30 '12 at 01:23
1

@Alp Nope. It works. Just try the fiddle and have a look at the console, please. – Cranio Jun 30 '12 at 01:30
ugh. why would you use e as your object reference when it's not in an event handler? – FlavorScape Aug 07 '12 at 18:17
@FlavorScape "i,e" for [i]ndex/[e]lement – Cranio Aug 08 '12 at 02:31

score 4 · Answer 4 · edited May 23 '17 at 10:32

A nice small jQuery plugin: jQuery.ignore()

$.fn.ignore = function(sel){
  return this.clone().find(sel||">*").remove().end();
};

Use like:

$("#parent").ignore()                  // Will ignore all children elements
$("#parent").ignore("script")          // Will ignore a specific element
$("#parent").ignore("h1, p, .ignore")  // Will ignore specific elements

Example:

<div id="parent">
   Get this
   <span>Ignore this</span>
   <p>Get this paragraph</p>
   <div class="footer">Ignore this</div>
</div>

var ignoreSpanAndFooter = $("#parent").ignore("span, .footer").html();

will result in:

Get this
<p>Get this paragraph</p>

_{Snippet from this Answer: https://stackoverflow.com/a/11348383/383904}

jquery exclude some child nodes from .text()

4 Answers4

Linked

Related