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, Sep 12 '11 at 15:48
Everybody who will suggest using regular expression will get a link to [RegEx match open tags except XHTML self-contained tags](http://stackoverflow.com/questions/1732348/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, Sep 12 '11 at 15:53

score 4 · Answer 1 · answered Sep 12 '11 at 16:14

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.

very concise much neater way of doing it than mine, a very good lesson for me ;-) — , Sep 12 '11 at 16:17

score 0 · Answer 2 · answered Sep 12 '11 at 15:59

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 '11 at 15:59

Arnaud Leymet

5,995
4
35
51

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. – Arnaud Leymet Sep 12 '11 at 16:01

score 0 · Answer 3 · answered Sep 12 '11 at 16:08

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 '11 at 16:08

jrummell

42,637
17
112
171

score 0 · Answer 4 · answered Sep 12 '11 at 16:15

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 '11 at 16:15

1

use ErickPetru's answer its much better, its just taught me a better way of doing it ;-) – Sep 12 '11 at 16:17
1

also note his use of text instead of html ... much better ;-) – Sep 12 '11 at 16:19

Parsing HTML using jQuery

4 Answers4