Make Array set of HTML string

Question

I am getting following string from API response. I have to transform this string into a set of Array. Text and following images should be one group. Text after image should create a new group with the following images. The question is how to run a loop over HTML string.

API Response

<p>aaaaa</p>
<p><img src="img.jpg" alt="" width="369" height="224" /></p>
<p><img src="img.jpg"alt="" width="369" height="224" /></p>
<p>bbbb</p>
<p>bbbb</p>
<p><img src="img.jpg" /></p>
<p>ccc</p>"

Expected output:

[
  ['aaaaa', '<img src="img.jpg" alt="" width="369" height="224" />', '<img src="img.jpg"alt="" width="369" height="224" />'],
  ['bbbb', 'bbbb', '<img src="img.jpg" />'],
  ['ccc']
]

The function will be like

function makeHtmlSet(){
var htmlSet = []
 for(var i=0;i<?;i++){
   if(?.nodeType===Node.textNode){
      htmlSet = [];
      htmlSet.push(?);
   }
   else{
    htmlSet.push(?);
   }
 }
}

If the response comes as text, you'll need a library to parse it into HTML. — Jamiec
– Jamiec, Commented Jul 24, 2018 at 8:05
Is there only ever one child node (of any type) of the parent p elements? — Rory McCrossan
– Rory McCrossan, Commented Jul 24, 2018 at 8:07
@RoryMcCrossan yes, there will be one child node ever and that will be p — Jitender
– Jitender, Commented Jul 24, 2018 at 8:08

Jamiec · Accepted Answer · 2018-07-24 08:34:19Z

1

Generally, you can do this with jQuery by passing the text-based HTML in to the jQuery function - with a slight caveat that you'll need to wrap it in an artificaial parent (div in the code below).

Then your logic is a little complex, you don't generate a new array until after an image, and two text nodes next to one another gets passed to the same array... so a little logic is required.

All in, the below seems to satisfy your needs.

var input = '<p>aaaaa</p>' +
'<p><img src="img.jpg" alt="" width="369" height="224" /></p>' + 
'<p><img src="img.jpg"alt="" width="369" height="224" /></p>' + 
'<p>bbbb</p>' + 
'<p>bbbb</p>' + 
'<p><img src="img.jpg" /></p>' + 
'<p>ccc</p>';

var $input = $("<div>" + input + "</div>");
var output = [];
var hasPassedImg = true
$("p",$input).each(function(){
  var hasImg = $(this).children("img").length>0
  if(hasImg){
     current.push($(this).html());
     hasPassedImg = true;
  }
  else{
     var text = $(this).text();
     if(hasPassedImg){
         current = [];
         output.push(current);
         hasPassedImg = false;
     }
     current.push(text);
  }
});

console.log(output);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

edited Jul 24, 2018 at 8:34

answered Jul 24, 2018 at 8:29

Jamiec

136k15 gold badges141 silver badges202 bronze badges

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

1 Comment

NullPointer Over a year ago

I think better way is to use DOMParser developer.mozilla.org/en-US/docs/Web/API/DOMParser

Jack jdeoel · Accepted Answer · 2018-07-24 09:14:42Z

As you describe , your api return is string and your html string have p as a parent root . First you can remove <p> by regex and replace functions. You can split your string into array by </p> delimeter . Finally you can create new array as you want ....

Here I made for fixed string only

var str = '<p>aaaaa</p>'+
'<p><img src="img.jpg" alt="" width="369" height="224" /></p>'+
'<p><img src="img.jpg"alt="" width="369" height="224" /></p>'+
'<p>bbbb</p>'+
'<p>bbbb</p>'+
'<p><img src="img.jpg" /></p>'+
'<p>ccc</p>';

function makeHtmlSet(){
  var htmlSet = [];
  var reg = /<p>/g;
  var newStr = str.replace(reg, "");
  newStr = newStr.split('</p>');
  htmlSet.push([newStr[0].trim(),newStr[1].trim(),newStr[2].trim()]);
  htmlSet.push([newStr[3].trim(),newStr[4].trim(),newStr[5].trim()]);
  htmlSet.push([newStr[6].trim()]);
  return htmlSet;
}

console.log(makeHtmlSet());

NullPointer · Accepted Answer · 2018-07-24 10:04:22Z

Simply You can use DOMParser to parse the string to DOM Document.It have the method parseFromString()

The DOMParser interface provides the ability to parse XML or HTML source code from a string into a DOM Document.

https://developer.mozilla.org/en-US/docs/Web/API/DOMParser

var data='<p>aaaaa</p><p><img src="img.jpg" alt="" width="369" height="224" /></p><p><img src="img.jpg"alt=""width="369" height="224" /></p><p>bbbb</p><p>bbbb</p><p><img src="img.jpg" /></p><p>ccc</p>'

function parseData(data){
    parser=new DOMParser();
    htmlDoc=parser.parseFromString(data, "text/html");
    var ptags = htmlDoc.getElementsByTagName("p");
    var output = [];
     var temp = [];
   
      $(ptags).each(function(index){
        if($(this).children("img").length>0){
          temp.push($(this).html());
       }
      else{
         var text = $(this).text();
         if(0==$(this).index() || $(this).prev('p').children("img").length>0){
	  	    temp=[];
          output.push(temp);  
       }
        temp.push(text);
      }
    });
    return output;
 }
console.log(parseData(data));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

thehamzarocks · Accepted Answer · 2018-07-24 08:51:14Z

-1

Since your response is a string: Create a hidden div:

<p id="demo" style="display:none">Demo div.</p>

Set the innerHTML of this div to the string:

el = document.getElementById("demo")
el.innerHTML = str;

Get the list of all p elements like so:

arr = el.querySelectorAll("p")

for(var i=0; i<arr.length; i++) {
    if(arr[i].firstChild.nodeName == "IMG") //do img stuff
    if(arr[i].firstChild.nodeName == "#text") //do text stuff
}

This should answer your question as to how to loop through HTML.

You can the remove the element:

el.parentNode.removeChild(el);

edited Jul 24, 2018 at 8:51

answered Jul 24, 2018 at 8:18

thehamzarocks

7535 silver badges10 bronze badges

2 Comments

Amnon Over a year ago

This won't work since the string is not it the DOM. It could work by a dirty trick such as making this string the innerHTML of some hidden div, and then running the DOM query on that div. I'd probably advise against it though (security and other issues)

thehamzarocks Over a year ago

The question asked how to loop through an HTML string. This is indeed a "dirty" solution, and not recommended, but hopefully, it helps the OP in a way.

Collectives™ on Stack Overflow

Make Array set of HTML string

4 Answers 4

1 Comment

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related