user2952238 user2952238 - 21 days ago 9
HTML Question

Turn html encoded string into array

I have this api call that returns a string, contaning a chunk of images. How can i convert that string into an array?

The string that gets returned lookls like below. Starts with a tag since its a wordpress post.

Its all the image tags src is want in an array.

<p><img src=\"http:\/\/local.pp.com\/api\/wp-content\/uploads\/2016\/10\/thumb-12.jpg\" alt=\"thumb\" width=\"720\" height=\"510\" class=\"alignnone size-full wp-image-52\" srcset=\"http:\/\/local.pp.com\/api\/wp-content\/uploads\/2016\/10\/thumb-12.jpg 720w, http:\/\/local.pp.com\/api\/wp-content\/uploads\/2016\/10\/thumb-12-300x213.jpg 300w\" sizes=\"(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 984px) 61vw, (max-width: 1362px) 45vw, 600px\" \/><br \/>\n<img src=\"http:\/\/local.pp.com\/api\/wp-content\/uploads\/2016\/10\/thumb-12.jpg\" alt=\"thumb\" width=\"720\" height=\"510\" class=\"alignnone size-full wp-image-52\" srcset=\"http:\/\/local.pp.com\/api\/wp-content\/uploads\/2016\/10\/thumb-12.jpg 720w, http:\/\/local.pp.com\/api\/wp-content\/uploads\/2016\/10\/thumb-12-300x213.jpg 300w\" sizes=\"(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 984px) 61vw, (max-width: 1362px) 45vw, 600px\" \/><br \/>\n<img src=\"http:\/\/local.pp.com\/api\/wp-content\/uploads\/2016\/10\/thumb-12.jpg\" alt=\"thumb\" width=\"720\" height=\"510\" class=\"alignnone size-full wp-image-52\" srcset=\"http:\/\/local.pp.com\/api\/wp-content\/uploads\/2016\/10\/thumb-12.jpg 720w, http:\/\/local.pp.com\/api\/wp-content\/uploads\/2016\/10\/thumb-12-300x213.jpg 300w\" sizes=\"(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 984px) 61vw, (max-width: 1362px) 45vw, 600px\" \/><br \/>\n<img src=\"http:\/\/local.pp.com\/api\/wp-content\/uploads\/2016\/10\/thumb-12.jpg\" alt=\"thumb\" width=\"720\" height=\"510\" class=\"alignnone size-full wp-image-52\" srcset=\"http:\/\/local.pp.com\/api\/wp-content\/uploads\/2016\/10\/thumb-12.jpg 720w, http:\/\/local.pp.com\/api\/wp-content\/uploads\/2016\/10\/thumb-12-300x213.jpg 300w\" sizes=\"(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 984px) 61vw, (max-width: 1362px) 45vw, 600px\" \/><br \/>\n<img src=\"http:\/\/local.pp.com\/api\/wp-content\/uploads\/2016\/10\/thumb-12.jpg\" alt=\"thumb\" width=\"720\" height=\"510\" class=\"alignnone size-full wp-image-52\" srcset=\"http:\/\/local.pp.com\/api\/wp-content\/uploads\/2016\/10\/thumb-12.jpg 720w, http:\/\/local.pp.com\/api\/wp-content\/uploads\/2016\/10\/thumb-12-300x213.jpg 300w\" sizes=\"(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 984px) 61vw, (max-width: 1362px) 45vw, 600px\" \/><\/p>\n"

Answer
var div = document.createElement('div');
div.innerHTML = myHTMLString;
var images = div.getElementsByTagName('img');

Create a div, put the html in it and then use getElementsByTagName to get the images.

getElementsByTagName returns an HTMLCollection, which is just like an array and can be iterated through the same way with an for loop.

for(var i=images.length; i--;){
    var image = images[i];
    // do stuff with each image
}

Edit: you say you want the src's in the array. look at this: https://jsfiddle.net/kev7hr2y/