如何使用正则表达式选择或捕获多个 HTML 标签？ [复制]答案

【问题标题】：How can I select or capture multiple HTML tags using regex? [duplicate]如何使用正则表达式选择或捕获多个 HTML 标签？ [复制]
【发布时间】：2021-04-05 20:42:45
【问题描述】：

要从我使用正则表达式的 html 文档中获取某个 HTML 标记及其内容 -

html -

<div id="abc">content</div>
<a class="anchorclass">content</a>
<table id="table1">content</table>
<div id="div2">content</div>
<a class="anchorclass2">content</a>
<div class="divclass">content</div>

正则表达式

    /<div id="abc"[\s\S]*?<\/div>/

它精确地返回这个特定的div 内容（id="abc" 的div）。

我想用一个正则表达式从上面捕获多个 html 元素，我该怎么做？有没有办法连接条件或者是否有任何“和”运算符来选择多个html标签？

我想编写一个选择 -

的单个正则表达式

id="abc"的div
一个 class="anchorclass"
div 与 class="divclass"

从上面的html，那会是什么？

【问题讨论】：

Regex 是错误的工具。使用HTML parser 之类的 HTML Agility Pack。

标签： javascript html regex web-scraping

【解决方案1】：

HTML 带有属性的标签，这是我的解决方案：

// <TAG(.*?)>(.*?)</TAG>
// Example
var regex = new System.Text.RegularExpressions.Regex("<h1(.*?)>(.*?)</h1>");
var m = regex.Match("Hello <h1 style='color: red;'>World</h1> !!");
Console.Write(m.Groups[2].Value); // will print -> World

【讨论】：

我已经在使用它了，我想知道如何在单个正则表达式中选择多个 html 标签，例如 id=yourID 的 div 和 id=yoursecondID 的 span。请看一下我的问题的编辑版本。

【解决方案2】：

如果您已经知道类/ID，则可以使用以下内容：

yourHtml = '<html><bod><a id="yourID">Some more text</a><div id="yourID">Some text here</div></body></html>'

regex = /<(?:div|a) id="(?:abc|anchorclass|divclass)">(.*?)<\/(?:div|a)>/g

while((result = regex.exec(yourHtml)) !== null) {
    console.log(result[1]);
}

(?:div|a) 匹配 div 和链接。只需添加您喜欢的任何内容。

但我不建议为此使用正则表达式！在调试时，这是容易出错且毫无乐趣的方式。相反，我建议将 html 作为一个整体进行解析，然后进行搜索。

yourHtml = '<html><bod><div id="yourID">Some text here</div></body></html>'

parser = new DOMParser();
parsedHtml = parser.parseFromString(yourHtml,"text/html");

console.log(parsedHtml.getElementById("yourID").innerText)

这样您就可以在parsedHtml 上使用任何标准的js 函数，而无需每次都创建新的正则表达式。这是一种更优雅的解决方案。

【讨论】：

"let regex = /
(.*?)/" 我已经在使用这个了，我想知道如何选择多个 html 标签在单个正则表达式中，例如 id=yourID 的 div 和 id=yoursecondID 的 span。
我编辑了我的答案。希望这符合您的需求。但我真的建议使用DOMParser。它在各个方面都是更好的解决方案。
非常感谢！我只有一个疑问，不是那个运营商吗？是 OR 运算符？你确定这会得到我将在正则表达式中指定的所有 html 标签吗？或者这只会拾取其中任何一个？
正则表达式本身匹配每一个，但一次只匹配一个。 regex.exec() 为所有这些返回一个迭代器。所以循环确实遍历了它们中的每一个。