Split a string of html into array of string, split by top level tag

Question

Say I have

var string = 
"<h1>Header</h1>
<p>this is a small paragraph</p>
<ul>
    <li>list element 1.</li>
    <li>list element 2.</li>
    <li>list element 3. With a small update.</li>
</ul>"
//newlines for clarity only

How can I split this string, using javascript so that I get

var array = string.split(/*...something here*/)

array = [
"<h1>Header</h1>",
"<p>this is a small paragraph</p>",
"<ul><li>list element 1.</li><li>list element 2.</li><li>list element 3. With a small update.</li></ul>"
]

I only want to split the top html elements, not the children.

Blender · Accepted Answer · 2013-04-18 19:52:31Z

3

You could do something like this:

var string = '<div><p></p></div><h1></h1>';
var elements = $(string).map(function() {
    return $('<div>').append(this).html();  // Basically `.outerHTML()`
});

And the result:

["<h1>Header</h1>", "<p>this is a small paragraph</p>", "<ul>    <li>list element 1.</li>    <li>list element 2.</li>    <li>list element 3. With a small update.</li></ul>"]

answered Apr 18, 2013 at 19:52

Blender

300k55 gold badges462 silver badges511 bronze badges

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

5 Comments

Eoin Murray Over a year ago

I know I added the jquery tag, but is there a way of doing it without jquery? and even in non-browser javascript?

Blender Over a year ago

@EoinMurray: Non-browser JavaScript?

Eoin Murray Over a year ago

like in nodejs. I vaguely remember solutions where people would attach the string to the dom and then read the children, I mean without using the dom.

Blender Over a year ago

@EoinMurray: You can run jQuery in Node without any problems.

dalore Over a year ago

What I don't like about this answer is that if the string contains an img.src then just by parsing it with jquery it makes a request.

Robert Plummer · Accepted Answer · 2015-04-09 19:16:05Z

2

A performant solution ( http://jsperf.com/spliting-html ):

var splitter = document.createElement('div'),
  text = splitter.innerHTML = "<h1>Header</h1>\
<p>this is a small paragraph</p>\
<ul>\
    <li>list element 1.</li>\
    <li>list element 2.</li>\
    <li>list element 3. With a small update.</li>\
</ul>",
  parts = splitter.children,
  part = parts[0].innerHTML;

edited Apr 9, 2015 at 19:16

answered Apr 9, 2015 at 19:08

Robert Plummer

6521 gold badge5 silver badges13 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 12:10:07Z

You can't do this with regular expressions. Your regular expression will fail if you have several nested elements of the same type, e.g.

<div>
  <div>
    <div>
    </div>
  </div>
</div>

This is due to the fact that regular expressions can only process regular languages, and HTML is a real context-free language (and context-free is "more complex" than regular).

See also: https://stackoverflow.com/a/1732454/2170192

But if you don't have nested elements of the same type, you may split your html-string by taking all matches returned by the following regular expression (which uses backlinks):

/<(\w+).*<\/\1\s*>/igsm

<(\w+) matches less-than-sign and several word-characters (letters, digits, underscores), while capturing the word-characters via parentheses (first capturing group).
.* matches contents of the element.
<\/ matches opening of the end-tag.
\1 is the backreference which matches exactly the sequence of symbols captured via the first capturing group.
\s*> matches optional whitespace and the greater-than sign.
igsm are modifiers: case-insensitive, global, dot-matches-all-symbols and multi-line.

Collectives™ on Stack Overflow

Split a string of html into array of string, split by top level tag

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related