JS split method, include separator in array

Question

I would like to split a set of div elements, for further text-processing in an array. A simple mockup:

var divElements = prompt('Input');
array = divElements.split('</div>')
console.log(array);

Input:

<div id="1"></div>
<div id="2"></div>
<div id="3"></div>
<div id="4"></div>

Output for now:

array
["<div id="1">", "
<div id="2">", "
<div id="3">", "
<div id="4">", ""]

but I would like to include the separator (div closing tag) inside the array to keep the html syntax intact. As a result the array should have these four items:

<div id="1"></div>
<div id="2"></div>
<div id="3"></div>
<div id="4"></div>

You should parse it as HTML instead of trying to split.

SLaks
– SLaks

2016-02-28 18:35:48 +00:00
Commented Feb 28, 2016 at 18:35 — SLaks
– SLaks, Commented Feb 28, 2016 at 18:35

Community · Accepted Answer · 2017-05-23 12:15:41Z

You can also use a regular expression, to look ahead for the next div.

var str = '<div id="1"></div><div id="2"></div><div id="3"></div><div id="4"></div>';

var arr = str.split(/(?=<div)/);

console.log(arr);

If you want to separate but keep the delimiter, you can use capturing parenthesis.

var str = '<div id="1"></div><div id="2"></div><div id="3"></div><div id="4"></div>';

var arr = str.split(/(<\/div>)/);

console.log(arr);

That said, you really should not do string operations, or regular expression parsing, on data that you know is HTML. Attributes might contain HTML-like patterns, and then you're out of luck.

Plunk it into a container element, and work on it that way, or use a proper parser.

var data = '<div id="1"></div><div id="2"></div><div id="3"></div><div id="4"></div>';

var ele = document.createElement('div');

ele.innerHTML = data;

console.log(ele.childNodes)

Darshan · Accepted Answer · 2016-02-28 19:01:46Z

0

split() method also takes regex to split strings. In your case use the regex \s(?=\<).

    var divElements = prompt('Input');
    array = divElements.split(/\s(?=\<)/);
    console.log(array);

regex explantion

\s - any space character
(?=\<) - followed by < character (positive look ahead)

edited Feb 28, 2016 at 19:01

answered Feb 28, 2016 at 18:51

Darshan

1,0447 silver badges16 bronze badges

Collectives™ on Stack Overflow

JS split method, include separator in array

2 Answers 2

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Linked

Related