parse html string in jquery

Question

How to parse the HTML string in jquery?

I have two types of html tags and i want get text from these tags

I am not able select the tag for below given html string

The html is here

<p>
    <b><span>22:00</span></b>
    <span>
        <span>
            <b>ABCD</b>
        </span>
        <b> XYZ</b>
</span>
</p>
<p>
    <b><span >06:00</span></b>
    <span>
        <b>LMNOP</b> 
    </span>
</p>

and jquery code

$(html).each(function() {
    $(this).find('p').each(function() {
        $(this).find('b span').eq(0).each(function() {
        });

        $(this).find('span b').eq(0).each(function() {
            console.log($(this).text());
        }); 
    });

I want to select ABCD and XYZ in one shot, similarly LMNOP

i.e output should be ABCDXYZ and LMNOP

How can I select this in jQuery?

What does html represent? A jQuery object? The page itself? — iambriansreed
– iambriansreed, Commented Oct 30, 2013 at 14:11

Rory McCrossan · Accepted Answer · 2013-10-30 13:35:52Z

1

You can use filter() to check that the selected element, the b tag, contains no child elements. Try this:

var $html = $("<p><b><span>22:00</span></b><span><span><b>ABCD</b></span><b> XYZ</b></span></p><p><b><span >06:00</span></b><span><b>LMNOP</b> </span></p>");

var $b = $html.find('b').filter(function() {
    return $(this).children().length == 0;
}).each(function() {
    console.log($(this).text());  
});

Example fiddle

answered Oct 30, 2013 at 13:35

Rory McCrossan

338k41 gold badges321 silver badges353 bronze badges

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

Comments

Smern · Accepted Answer · 2013-10-30 14:00:34Z

1

I took a second look at your attempt and expected result and think I actually figured out what you are trying to do:

fiddle

$(html).find('p').each(function () {
    console.log($(this).find('span b').text());
});

Result (same as your expected "ABCDXYZ and LMNOP") :

ABCDXYZ
LMNOP

answered Oct 30, 2013 at 14:00

Smern

19.1k22 gold badges77 silver badges93 bronze badges

Comments

kundan Karn · Accepted Answer · 2013-10-30 14:17:29Z

<script type="text/javascript">
        /*
        here I assumed that the <b> tag contains alpha numeric characters or space
        for other characters regular expression should be changed.
        */
        var arr = $('body').html().match(/\<b\>[\sA-z0-9]*\<\/b\>/gi);
        var output = Array();
        var temp = '';
        for (i = 0; i < arr.length; i++) {
            var str = arr[i].replace('<b>', '');
            str = str.replace('</b>', '');
            temp += str;
            if (i % 2 != 0) {
                output.push(temp);
                temp = '';
            }
        }
        if (i % 2 != 0) {
            output.push(temp);
        }
        //the array output stores the required result
        for (item in output) {
            document.write(output[item] + '<br>');
        }

    </script>

iambriansreed · Accepted Answer · 2013-10-30 14:50:58Z

0

Based solely on the HTML string provided, Try:

$(html).each(function(){
    console.log( $('span b', this).text() );
});

Outputs:

ABCD XYZ
LMNOP

Proof: http://fiddle.jshell.net/mScSv/

With $(html) I converted the HTML string to a valid jQuery objects. In this case there are two root elements in the string, to paragraphs p so I could run each against it directly.

Note the space in the output as there is the same space in the HTML.

edited Oct 30, 2013 at 14:50

answered Oct 30, 2013 at 13:36

iambriansreed

22.3k6 gold badges66 silver badges81 bronze badges

6 Comments

Rory McCrossan Over a year ago

Criticising comments are not exactly constructive. Also, your code would break if the content of the html string changes.

iambriansreed Over a year ago

Any jQuery selectors based on tag name alone would break if the content of the html changes. The OP has given us no other choice.

Rory McCrossan Over a year ago

Tag names are less likely to change than the order they appear in. Also, it seems clear that the OP wants to exclude the b tags which contain span elements, not just the second, third and fourth b tag.

iambriansreed Over a year ago

Thanks. Did a much cleaner selector and added proof.

Smern Over a year ago

Oh come on, you just completely removed your answer and copied the essence of mine after I posted. Also your $('p') wouldn't work as it appears that the OP has the html he is working on stored in a variable rather than on the document. Also you still have "each() isnt needed" while using it.

|

Collectives™ on Stack Overflow

parse html string in jquery

4 Answers 4

Comments

Comments

Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related