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

【问题标题】：Regex for capturing repeated groups Javascript用于捕获重复组 Javascript 的正则表达式
【发布时间】：2017-10-22 08:05:48
【问题描述】：

我有一些如下格式的测试数据 -

"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 对象数组中。

【问题讨论】：

你需要使用String.prototype.match()
这有点复杂，您可以尝试在.split() 中使用正则表达式将输入拆分为所需输出的形式。此外，您可以在结果数组的每个部分上运行您的正则表达式以提取您想要的数据。
stackoverflow.com/a/1732454/1682509
好吧..也许你甚至想使用 DOM 操作来做到这一点。我看不出为什么你甚至试图通过正则表达式弄乱 html
我想用 PDFMake.js 创建动态 pdf，它们需要我上面指定的严格格式的文档对象定义，这就是为什么我想尝试在 regex 的帮助下解析 HTML 内容. split 似乎是一个不错的选择，我完全忘记了这个，但我相信 DOMParser 非常适合我在这里的任务，所以我也会尝试一次

标签： javascript html regex transformation regex-group

【解决方案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]))

【讨论】：