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

Question

我有这个api调用，它返回一个字符串，包含一堆图像。 如何将字符串转换为数组？

返回的字符串如下所示。 开头为

标记，因为它是一个wordpress帖子。

它的所有图像标签src都需要放在数组中。

<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');

创建一个div，将html放入其中，然后使用getElementsByTagName获取图像。

getElementsByTagName返回一个HTMLCollection，它就像一个数组，并且可以通过for循环以相同的方式进行迭代。

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

编辑：您说您想要src在数组中。 看这个： https : //jsfiddle.net/kev7hr2y/

Answer 2

您可以使用DOMParser将字符串解析为DOM元素，然后找到所有<img>和map()的src属性：

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'); });