javascript - 使用 javascript 创建带有图像标签的数组

Question

我有 api 请求，它是字符串数据类型。它包含随机纯文本和 img 标签/标签，它们全部组合在一起。一个字符串可以有一个或多个 img 标签。我正在寻找从字符串的其余部分分割这些 img 标签并将其放入数组的最佳方法。

"Random text <img src='img-one-src'  alt='alt-one' /> some other random text <img src='img-two-src' src='alt-two' />"

数组可以是：

var imgs = [{src: 'img-one-src', alt: 'alt-one'}, {src: 'img-two-src', alt: 'alt-two'}]

标签： javascriptreactjs

Answer 1

创建一个元素并使您的字符串成为innerHTML该元素的。然后querySelectorAll('img')在该元素上使用，并使用 array spread 将结果拖到一个数组中[...res]。如果您想要数组中的 HTML 字符串而不是元素，只需使用map()：

const str ="Random text <img src='img-one-src' /> some other random text <img src='img-two-src' />";

const div = document.createElement('div');
div.innerHTML = str;

const images = [...div.querySelectorAll('img')];
const imageStrings = images.map(x=>x.outerHTML);

console.log(images, imageStrings);