如何获取 html 标签内的内容，包括在 javascript 中使用正则表达式的标签？

Question

我在下面有文字 -

how  much  production  in  batu

现在此文本显示为一系列html标签。 基本上，每个单词都包含在具有特定style或class的span中。 这是它的样子

'<span style="">how &nbsp;</span><span style="">much &nbsp;</span><span class="pink-highlight">production &nbsp;</span><span style="">in &nbsp;</span><span class="yellow-highlight">batu</span>'

现在我想从这个html字符串中得到两件事：样式或 class 和跨度内的内容（没有  ）

所以我想要一个字符串中的以下信息array

[["", "how"], ["", "much"], ["pink-highlight", "production"], ["", "in"], ["yellow-highlight", "batu"]]

现在这可以使用regex轻松完成。 但我并不精通regex 。 我能想到的模式

<span>(.*?)</span>

但它只会找出span内的内容，甚至在这种情况下都不起作用，因为每个span都有一个style标签或一个 class。

那么在这种情况下，什么regex最适合获得所需的结果呢？

Answer 1

使用 reg exp 可能会因匹配 HTML 而失败。 将其解析为 HTML 并获取数据非常容易。

 var html = '<span style="">how &nbsp;</span><span style="">much &nbsp;</span><span class="pink-highlight">production &nbsp;</span><span style="">in &nbsp;</span><span class="yellow-highlight">batu</span>' var temp = document.createElement('div') temp.innerHTML = html var data = Array.from(temp.querySelectorAll('span')).map(span => ([ span.getAttribute("style") || span.getAttribute("class") || '', span.textContent.trim() ]) ) console.log(data)

Answer 2

我将提供一个简单的正则表达式。 实际上，我只是添加了另外 2 个选项。

(<span>(.*?)<\/span>)|(<span style=".*?">(.*?)<\/span>)|(<span class=".*?">(.*?)<\/span>)