如何在JavaScript中提取HTML字符串指定span的data-id？

现有一段HTML字符串如下：

const text = "<p>Hi <span class="mention" data-index="0" data-denotation-char="@" data-id="58963f62-3417-481f-9d46-4f5625e9a1ab" data-value="test1 "><span contenteditable="false"><span class="ql-mention-denotation-char">@</span>test1 </span></span> Hi <span class="mention" data-index="0" data-denotation-char="@" data-id="58963f62-3417-481f-9d46-4f5625e9a1cd" data-value="test2 "><span contenteditable="false"><span class="ql-mention-denotation-char">@</span>test2 </span></span> </p>"

需要提取所有class为mention的span标签的data-id值，预期输出：["58963f62-3417-481f-9d46-4f5625e9a1ab", "58963f62-3417-481f-9d46-4f5625e9a1cd"]，想知道除了正则解析外，JavaScript里有没有更简便的实现方式。

方法一：用DOM API解析（推荐，不用写正则） #

在浏览器环境里，直接借助浏览器的DOM解析能力就行，步骤很简单：

1. 建一个临时的div元素，把HTML字符串塞到它的innerHTML里，浏览器会自动把字符串转成DOM节点。
2. 用querySelectorAll选中所有带mention类的span元素。
3. 遍历这些元素，把每个元素的data-id值捞出来存到数组里。

代码示例：

const text = "<p>Hi <span class="mention" data-index="0" data-denotation-char="@" data-id="58963f62-3417-481f-9d46-4f5625e9a1ab" data-value="test1 "><span contenteditable="false"><span class="ql-mention-denotation-char">@</span>test1 </span></span> Hi <span class="mention" data-index="0" data-denotation-char="@" data-id="58963f62-3417-481f-9d46-4f5625e9a1cd" data-value="test2 "><span contenteditable="false"><span class="ql-mention-denotation-char">@</span>test2 </span></span> </p>";

// 创建临时容器
const tempDiv = document.createElement('div');
// 赋值HTML字符串，浏览器自动解析成DOM
tempDiv.innerHTML = text;
// 选中所有目标span元素
const mentionSpans = tempDiv.querySelectorAll('span.mention');
// 提取data-id到数组
const dataIds = Array.from(mentionSpans).map(span => span.dataset.id);

console.log(dataIds);
// 输出：["58963f62-3417-481f-9d46-4f5625e9a1ab", "58963f62-3417-481f-9d46-4f5625e9a1cd"]

为啥推荐这个方法？ #

• 不用自己写复杂的正则，避免正则匹配HTML时容易踩的坑（比如属性值带特殊字符、标签嵌套乱了之类的）。
• 用浏览器原生的HTML解析逻辑，兼容性和可靠性都更高。
• 代码看着明白，后面改起来也省事。

方法二：正则解析（备选） #

如果是在Node.js这类非浏览器环境，又不想引入DOM解析库，可以用正则实现，但前提是HTML结构比较固定，不会有太复杂的情况：

const text = "<p>Hi <span class="mention" data-index="0" data-denotation-char="@" data-id="58963f62-3417-481f-9d46-4f5625e9a1ab" data-value="test1 "><span contenteditable="false"><span class="ql-mention-denotation-char">@</span>test1 </span></span> Hi <span class="mention" data-index="0" data-denotation-char="@" data-id="58963f62-3417-481f-9d46-4f5625e9a1cd" data-value="test2 "><span contenteditable="false"><span class="ql-mention-denotation-char">@</span>test2 </span></span> </p>";

// 匹配class为mention的span中的data-id值
const regex = /<span class="mention"[^>]*data-id="([^"]+)"/g;
const dataIds = [];
let match;
while ((match = regex.exec(text)) !== null) {
  dataIds.push(match[1]);
}

console.log(dataIds);
// 输出：["58963f62-3417-481f-9d46-4f5625e9a1ab", "58963f62-3417-481f-9d46-4f5625e9a1cd"]

注意：正则解析只适合HTML结构固定、没有复杂嵌套或特殊字符的场景，不然很容易匹配错。

内容的提问来源于stack exchange，提问作者Sahil