将html编码的字符串转换为数组

Question

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 1

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/

Answer 2

You can use the DOMParser to parse the string into DOM elements, then find all <img> and map() their src attribute:

var parser = new DOMParser(),
    parsedElms = parser.parseFromString(yourHTMLString, 'text/html'),
    imgs = parsedElms.getElementsByTagName('img');

var result = Array.prototype.map.call(imgs, function(e) { return e.getAttribute('src'); });