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'}]

Answer 1

创建一个元素，并使您的字符串成为该元素的innerHTML。然后在该元素上使用querySelectorAll('img')，然后使用数组展开[...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);

Answer 2

您可以使用正则表达式来做到这一点。

let str = "Random text <img src='img-one-src' /> some other random text <img src='img-two-src' />";
console.log(str.match(/<img.+?\/>/g));
console.log(str.replace(/<img.+?\/>/g, ""));

使用JavaScript创建带有图片标签的数组

2 个答案: