Jquery: convert html to array

Question

Is there a easy way to get an array out of a string (html) with jquery/javascript like:

html:

<h1>this is a test</h1>
<p>This is a test</p>
<p>This is a test</p>
<h2>this is a test</h2>
<p>This is a test</p>

to an array:

array[0]['tag'] = 'h1'
array[0]['value'] = 'this is a test'
array[1]['tag'] = 'p'
array[1]['value'] = 'this is a test'
array[2]['tag'] = 'p'
array[2]['value'] = 'this is a test'
array[3]['tag'] = 'h2'
array[3]['value'] = 'this is a test'
array[4]['tag'] = 'p'
array[4]['value'] = 'this is a test'

Thanks!

jAndy · Accepted Answer · 2012-03-28 10:43:57Z

2

updated

JS

var htmlstring = "<h1>this is a test</h1><p>This is a test</p><p>This is a test</p><h2>this is a test</h2><p>This is a test</p>",
    map = { };

$(htmlstring).each(function(_, node) {
    map[ _ ] = { };
    map[ _ ][ node.nodeName ] = node.textContent;
});

console.log(map);

Demo: http://jsfiddle.net/KzfpK/

edited Mar 28, 2012 at 10:43

answered Mar 28, 2012 at 10:29

jAndy

237k57 gold badges313 silver badges363 bronze badges

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

2 Comments

Jaap Over a year ago

But the html is in a string. And not yet an existing element.

jAndy Over a year ago

@Jaap: updated, you can just wrap a "valid" htmlstring into the jquery constructor aswell.

scibuff · Accepted Answer · 2012-03-28 10:33:09Z

2

something like this should do the trick but it will not work recursively (only for direct body children).

var tags = [];

$('body').children().each( function( index, element ) {
    tags.push({ 
        'tag' : element.nodeName.toLowerCase(), 
        'value' : element.text()
    });
});

answered Mar 28, 2012 at 10:33

scibuff

13.8k2 gold badges30 silver badges34 bronze badges

3 Comments

Jaap Over a year ago

But the html is in a string. And not yet an existing element.

scibuff Over a year ago

just pass the string into the $() selector then, e.g $('<body><h1>text</h1></body>').children()

voigtan Over a year ago

@Jaap make it to an jquery object then: $(htmlString) and run both scibuff and @jAndy´s code.

benoît · Accepted Answer · 2012-03-28 10:36:51Z

0

here an idea

$('body *').each(function(i){
console.log($(this).text());
console.log(this.nodeName);
console.log(i);
});

answered Mar 28, 2012 at 10:36

benoît

1,4833 gold badges13 silver badges31 bronze badges

1 Comment

scibuff Over a year ago

beware: using the * can be very slow

Collectives™ on Stack Overflow

Jquery: convert html to array

3 Answers 3

2 Comments

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related