Question

我有以下格式的测试数据 -

"lorem ipsum <img src='some_url' class='some_class' /> lorem ipsum <img src='some_url' class='some_class' /> ipsum <img src='some_url' class='some_class' />"

现在，我的目标是识别所有图像标签及其各自的源URL和css类，并将它们与剩余文本一起存储在有序数组中，如 -

["lorem ipsum", {imageObject1}, "lorem ipsum", {imageObject2}, "ipsum", {imageObject3}]

现在我尝试创建一个示例正则表达式

var regex = /(.*(<img\s+src=['"](.+)['"]\s+(class=['"].+['"])?\s+\/>)+?.*)+/ig

现在，当我尝试这个带有示例文本的正则表达式时，我得到了 -

regex.exec(sample_text) => [0:"lorem ipsum <img src='some_url1' class='some_class1' /> lorem ipsum <img src='some_url2' class='some_class2' /> ipsum <img src='some_url3' class='some_class3' />"
1:"lorem ipsum <img src='some_url1' class='some_class1' /> lorem ipsum <img src='some_url2' class='some_class2' /> ipsum <img src='some_url3' class='some_class3' />"
2:"<img src='some_url3' class='some_class3' />"
3:"some_url3"
4:"class='some_class3'"]

如何在javascript中转换样本html文本到具有属性的标记html对象数组中。

Answer 1

Do not use regular expressions to parse HTML。使用DOMParser解析字符串，然后使用CSS查询从DOM获取图像，它将更可靠，更易于阅读。

var html = "lorem ipsum <img src='some_url' class='some_class' /> lorem ipsum <img src='some_url' class='some_class' /> ipsum <img src='some_url' class='some_class' />"

var nodes = new DOMParser().parseFromString(html, "text/html").body.childNodes

这几乎可以让你得到你想要的东西（只有一些你可以过滤掉的空文本节点）。

或者在HTML中没有图片和文字的情况下，做一些更准确的事情：

var images = new DOMParser().parseFromString(html, "text/html").querySelectorAll("img")
var array = new Map([...images].map(img => [img.previousSibling.nodeValue, img]))

用于捕获重复组Javascript的正则表达式

1 个答案: