Parsing HTML using jQuery

Question

I am new to learning Jquery. I want to parse the HTML string:

<tr>
    <td class="first"><b><a href="/q?s=TOM">TOM</a></b></td>
    <td class="second name">Tom is a good boy</td>
    <td class="last_trade"><b><span id="yfs_l10_TOM">5.45</span></b> <nobr><span id="yfs_t10_TOM">Sep 9</span></nobr></td>
    <td><span id="yfs_c10_TOM"><width="10" height="14" border="0" src="abcdefgh" alt="Down"> <b style="color:#cc0000;">14.49</b></span> <span id="yfs_p20_TOM"><b style="color:#cc0000;"> (72.67%)</b></span></td>
    <td><span id="yfs_v00_TOM">4,100</span></td>
    <td class="last"><a href="/q/bc?s=TOM">Chart</a>, <a href="/q?s=TOM">More</a></td>
</tr>

The above string repeats 10 times with different values in the HTML I want to get the values: TOM, 5.45, 14.49, 72.67% , 4,100 for all the 10 repititions of similar strings in HTML.

If string.split() is not sufficient for your needs, you'll probably want to use regular expressions and string.match(). (Those are plain JavaScript methods, not jQuery.) — Blazemonger
– Blazemonger, Commented Sep 12, 2011 at 15:48
Everybody who will suggest using regular expression will get a link to RegEx match open tags except XHTML self-contained tags. Shilpi Gautam, if are you trying to learn jQuery by parsing HTML with it, I suggest to try another way, jQuery is not really meant to parse HTML, and it's not a good exercise to learn it. — Albireo
– Albireo, Commented Sep 12, 2011 at 15:53

Erick Petrucelli · Accepted Answer · 2011-09-12 16:14:20Z

4

Here is a working sample that I created to help you using the jQuery selectors which you need. The jQuery code loops each tr:

var results = [];

$("table tr").each(function(i) {
    results[i] = {
        firstName: $("td.first", this).text(),
        lastTrade: $("td.last_trade span:first", this).text(),
        down: $("td.last_trade", this).next("td").find("span:first").text(),
        downPercentage: $("td.last_trade", this).next("td").find("span:last").text(),
        someOtherNumber: $("td.last", this).prev("td").text() 
    };
});

You must change property names and use the results based on your needs.

answered Sep 12, 2011 at 16:14

Erick Petrucelli

15.1k9 gold badges68 silver badges89 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user359135 Over a year ago

very concise much neater way of doing it than mine, a very good lesson for me ;-)

Arnaud Leymet · Accepted Answer · 2011-09-12 15:59:50Z

0

Use javascript regular expressions (AKA Regexp):

var data = "TOMTom is a good boy5.45 Sep 9 14.49 (72.67%)4,100Chart, More";
var regex = /^(.+)Tom is a good boy([0-9\.]+) [^\s]+ [0-9]+ ([0-9\.]+) \(([0-9,]+)%\)([0-9\.]+)/
var extracted_data = data.match(regex);
alert(extracted_data[0]);
alert(extracted_data[1]);
alert(extracted_data[2]);
alert(extracted_data[3]);

answered Sep 12, 2011 at 15:59

Arnaud Leymet

6,1445 gold badges37 silver badges52 bronze badges

1 Comment

Arnaud Leymet Over a year ago

Well, the question changed, hence my answer won't be a proper one. This is a solution if you need to parse a String, not the DOM.

jrummell · Accepted Answer · 2011-09-12 16:08:15Z

0

You can loop through the table rows with each and grab the values by class.

$("#table1 tr").each(function() 
{
    $this = $(this);
    var firstName = $this.find(".first").text();
    var secondName = $this.find(".second").text(); 
    // ...
});

answered Sep 12, 2011 at 16:08

jrummell

43.2k18 gold badges116 silver badges179 bronze badges

Comments

user359135 · Accepted Answer · 2011-09-12 16:15:45Z

0

based on updated question...

I personally would create an object to store the data in each row:

    pupil = function () {
        this.name;
        this.score;
        this.dob;
        //..etc
    }

then populate an array once the page is loaded e.g.:

    $(function () {
        var pupils = [];
        $('table').find('tr').each(function (x, d) {
            temp = new pupil();
            temp.name = $(d).find('.first').find('a').html();
            //...etc...
        });
    });

answered Sep 12, 2011 at 16:15

user359135

2 Comments

user359135 Over a year ago

use ErickPetru's answer its much better, its just taught me a better way of doing it ;-)

user359135 Over a year ago

also note his use of text instead of html ... much better ;-)

Collectives™ on Stack Overflow

Parsing HTML using jQuery

4 Answers 4

1 Comment

1 Comment

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related