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.

score 3 · Accepted Answer · answered Apr 18 '13 at 19:52

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 '13 at 19:52

Blender

289,723
53
439
496

I know I added the jquery tag, but is there a way of doing it without jquery? and even in non-browser javascript? – Eoin Murray Apr 18 '13 at 19:55
@EoinMurray: Non-browser JavaScript? – Blender Apr 18 '13 at 19:56
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. – Eoin Murray Apr 18 '13 at 19:59
@EoinMurray: You can run jQuery in Node without any problems. – Blender Apr 18 '13 at 21:43
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. – dalore Jun 11 '16 at 18:56

Robert Plummer · Answer 2 · 2015-04-09T19:16:05.987

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

answered Apr 09 '15 at 19:08

Robert Plummer

634
1
5
13

score 1 · Answer 3 · edited May 23 '17 at 12:10

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.

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

3 Answers3