使用javascript创建带有图像标签的数组
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了使用javascript创建带有图像标签的数组相关的知识，希望对你有一定的参考价值。
我有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'}]
答案
创建一个元素并使你的字符串成为该元素的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);另一答案
您可以使用正则表达式来执行此操作。
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创建带有图像标签的数组的主要内容，如果未能解决你的问题，请参考以下文章
在将图像分配给 img 标签之前使用 javascript 调整图像大小