How to select certain text nodes using jquery?

Question

I'm trying to get some data from a website using ajax.

This is my code with an ajax POST methode:

$(data).find('.col-md-9 .panel:lt(5)').each(function () { console.log($(this).find('.panel-body .sp-card td:eq(1) center ').text());

console:

Mc-Wars Network IP: mc-wars.org Vote - Server info Website

I just want to get the first line : Mc-Wars Network

Please help!

Here is an image of the html code Im scraping.

Html code

Here is an image of the console after scraping. (I just need the first line.

console

This is code from the website Im scraping:

<div onclick="location.href='//www.serverpact.com/vote-20129 ';" class="panel panel-default sp-plane">
                        <div class="ribbon ribbon-small ribbon-blue">
                            <div class="banner">
                                <div style="font-size: 14px;text-align: center;" class="text">#1</div>
                            </div>
                        </div>
                        <div style="padding: 5px;" class="panel-body">
                            <table class="sp-card">
                                <tbody><tr>
                                    <td style="font-weight: bold;vertical-align: middle;"><center><i class="fa fa-thumbs-up"></i><br>8384<br><br>#1</center></td>
                                    <td style="font-weight: bold;vertical-align: middle;">
                                        <center>
                                        Mc-Wars Network<br>
                                        <b>IP: mc-wars.org<br>
                                        <a style="margin-top: 5px;" class="btn btn-primary btn-sm" href="//www.serverpact.com/vote-20129 ">Vote - Server info</a> 
                                        <a style="margin-top: 5px;" class="btn btn-success btn-sm" href="http://mc-wars.org">Website</a>
                                        </b></center>
                                    </td>
                                    <td width="500px" class="hidden-xs">
                                    <a href="http://mc-wars.org" target="_blank"><img style="margin-top: 7px;margin-bottom: 3px;border-radius: 4px;" src="http://www.serverpact.com/b/20129.gif" alt="Mc-Wars Network" class="img-responsive hidden-xs"></a>
                                        <span style="font-size: 13px;">
                                            McWars is a minecraft pvp based server where you will have to build a fortress for your team and destroy the other teams base to win. With more than 10 different classes to choose, youll love it.
                                        </span>            
                                    </td>
                                </tr>
                            </tbody></table>
                        </div>
                    </div>

score 1 · Answer 1 · edited May 23 '17 at 11:50

1

Probably text() combines all child text nodes.

What you need is probably to retrieve the text nodes as nodes then get their content. See this post for an example.

edited May 23 '17 at 11:50

Community

1
1

answered May 06 '15 at 20:13

amahfouz

2,328
2
16
21

ekuusela · Answer 2 · 2015-05-06T20:23:33.913

Here's a snippet where I navigate the child nodes of the center in the td to the proper text node. Note that whitespace creates a child node, so for example before the center node theres a whitespace only text node (that doesn't matter in this case but it's something you should be aware of).

document.write('here you go:' + $('#firstDiv td:nth-child(2) center')[0].childNodes[0].textContent)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="firstDiv">
        <table id="coolTable">
           <tbody>
           <tr>
              <td>
              </td>
              <td>
                    <center>
                       The text I need!
                    <br>
                    <b>
                    The text I dont need!
                    </b>
                    </center>
             </td>
            </tr>
            </tbody>
         </table>
    </div>

See also: MDN: Whitespace in the DOM

Did you read the article I linked to? It has some utility functions for doing that, like the `first_child( par )` — ekuusela, May 07 '15 at 05:14

score 1 · Answer 3 · answered May 06 '15 at 21:25

1

There is a way to do that:

$(data).find('#firstDiv #coolTable').each(function () {
console.log($.trim($(this).find('tbody tr td:eq(1) center').contents()[0].nodeValue))});

answered May 06 '15 at 21:25

Developer Ph2

46
6

When I replace the .text() function with .contents()[0].nodeValue I get this error = Uncaught TypeError: Cannot read property 'nodeValue' of undefined – Infinity May 06 '15 at 21:47
You're using the find method looking for class elements instead id elements as you've defined in your html structure. Only replace your script with the above, once that I already have tested it in order to get it working. – Developer Ph2 May 07 '15 at 12:11
Regarding the question you've asked to @ekuusela, you can remove the whitespace using the jQuery method $.trim(' string_here ') as I already use in my answer. Dont forgot to vote up whether it was useful. Thank you! – Developer Ph2 May 07 '15 at 13:05
The above code was just an example of what I needed to get. I changed my question to were you can see what I really need. Please take a look. – Infinity May 07 '15 at 15:27

score 1 · Answer 4 · answered May 07 '15 at 17:15

1

Ok, your question have changed a lot!
Add at the end of your .text() which will do the job:

.match(/[^\n]+/g)[0]

Note that all lines can be caught by changing the index, where "0" is the first line, "1" the second and successively.

answered May 07 '15 at 17:15

Developer Ph2

46
6

Nope, I get this error now. Uncaught TypeError: Cannot read property '0' of null (It gets all the text when I dont use the .match at the end) – Infinity May 07 '15 at 19:59
Can you please post the code and HTML structure so I can try anything here? – Developer Ph2 May 07 '15 at 20:06
Try to add the .toString() after the .text() method and before the .match(). – Developer Ph2 May 07 '15 at 20:12
adding the tostring gives the same error. Please take a look at the images I posted. – Infinity May 07 '15 at 20:17
@Infinity, from what node do you wanna begin to seek? Is this first repeatable? – Developer Ph2 May 07 '15 at 20:20
I need the first node each time. My js always gives me 4 lines of text. I just need the first line. – Infinity May 07 '15 at 20:23
For this case it's just: 'Mc-Wars Network' that I need, but it has to word dynamicly – Infinity May 07 '15 at 20:25
Ok! Please, right click on the main node and left click on "Edit as HTML". Select then all the html and post in your answer by using the "{}" code feature of the editor and I'll give you a solution! – Developer Ph2 May 07 '15 at 20:27
Ok, but give me the full HTML since the node that jQuery will start to look (I think is the element that have a class named "'.col-md-9"). You're trying to get this info by ajax? If true, via GET or POST? I'll build a complete example and post as code snippet. – Developer Ph2 May 07 '15 at 20:45
I can add all of it because It's to long... I added a part of the html code (should be enough) Please work with this line: $(data).find('.col-md-9 .panel:lt(5)').each(function () {console.log($(this).find('.panel-body .sp-card td:eq(1) center').text()); – Infinity May 07 '15 at 20:54
Ok, but from where **data** is coming from? By using ajax ($.get or $post)? The parent div (with panel class) have more than an ocurrence, ok? Thank you! – Developer Ph2 May 07 '15 at 21:05
using ajax POST. Nope there is only one parent div with that class name. – Infinity May 07 '15 at 21:12

How to select certain text nodes using jquery?

4 Answers4