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

问题描述 投票:0回答:2

我有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'}]
javascript reactjs
2个回答
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);

1
投票

您可以使用正则表达式来执行此操作。

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, ""));
© www.soinside.com 2019 - 2024. All rights reserved.