spliting the string into desired format and creating an array out of it

Question

I have a string which I want to break after every </div> and insert into an array. Following is the string.

"<DIV title='Run of Network' id='525000000'>Run of Network</DIV>
<div title='3dServer11' id='525001499'>3dServer11</div>"

I thought of using split() function, but since this is not a comma separated string, I am not able to understand exactly how should I break the string and generate a array. In the array I want the single single div entries like:

a[0] = <DIV title='Run of Network' id='525000000'>Run of Network</DIV>
a[1] = <div title='3dServer11' id='525001499'>3dServer11</div>"

Can any one help? Thanks in advance.

• mplungjan: Why not render it in a container and parse tagname?
• Jamiec: Please, dont parse HTML with regex

Answer 1

I wouldn't suggest you to split HTML strings with split method or to parse it with regular expressions. It is always better to operate elements with DOM methods:

var str = "<DIV title='Run of Network' id='525000000'>Run of Network</DIV>\
 <div title='3dServer11' id='525001499'>3dServer11</div>",
 div = document.createElement("div"),
 arr = [];
div.innerHTML = str;
arr = Array.prototype.slice.call(div.getElementsByTagName("div"));
arr = arr.map(function(e) { return e.outerHTML; }); // to create strings
 // out of DOM elements
console.log(arr);

• Rikonator: +1. Could add arr.forEach(function(e,i,a) { a[i] = e.outerHTML; }), so that arr stores strings and not element objects.
• VisioN: @Rikonator True, but maybe map is better here. Anyway the OP needs to check browser compatibility to use these methods and add shim if needed.
• milind: @ VisioN the above solution does not work with IE 8 it gives me "Array.prototype.slice.call(div.getElementsByTagName("div")) JScript object expected Error"..how can I handle this. If it is not possible with the above solution can you provide another solution

Answer 2

try

<div id="container"></div>
<script>
$(document).ready(function () {
 var str = "<div title='Run of Network' id='525000000'>Run of Network</div><div title='3dServer11' id='525001499'>3dServer11</div>";
 $("#container").html(str);
 for (i = 0; i < $("#container").children().length; i++) {
 alert($("#container").children()[i].innerHTML);
 }
});

Answer 3

Update:

Wrote a small jQuery plugin if you had a DOM element you wanted to do the same operation to:

(function($) {
 $.fn.splitDOMStringsByTag = function( selector ) {
 var resultsArray = [];
 this.find( '> ' + selector).each(function() {
 resultsArray.push( $(this)[0].outerHTML.replace( /[\s\n\r]+/g, ' ' ) );
 });
 return resultsArray;
 };
})( jQuery );

How this works:

Suppose you had the following DOM

<ul id="abc">
 <li>One </li>
 <li>Two </li>
 <li>Three </li>
 <li>Three 
 <ul>
 <li>Three point five</li>
 </ul>
 </li>
 <li>Four </li>
</ul>

You would then do the following:

var myArray = $('#abc').splitDOMStringsByTag('li'); 

And get the following Output

myArray; // console
["<li>One </li>", "<li>Two </li>", "<li>Three </li>", "<li>Three <ul> <li>Three point five</li> </ul> </li>", "<li>Four </li>"]
myArray[3] // console
"<li>Three <ul> <li>Three point five</li> </ul> </li>"

---

Old Answer with plain JS

var ipt = "<DIV title='Run of Network' id='525000000'>Run of Network</DIV><div title='3dServer11' id='525001499'>3dServer11</div>",
 dummyDiv = document.createElement("div"),
 divList = [],
 a = [];
dummyDiv.innerHTML = ipt;
divList = Array.prototype.slice.call(dummyDiv.getElementsByTagName("div"));
for (var i = 0; i < divList.length; i++) {
 a.push(divList[i]);
}

This would give you your desired a with

a[0] = <DIV title='Run of Network' id='525000000'>Run of Network</DIV>
a[1] = <div title='3dServer11' id='525001499'>3dServer11</div>

To get the strings, simply use a[0].outerHTML

a[0].outerHTML;
// Console Output
"<div title="Run of Network" id="525000000">Run of Network</div>"