Javascript正则表达式未知重复匹配

Question

这很难描述，因为我不是正则表达式专家。所以我告诉你我的情况。

在 HTML 中，希望将 class 属性贡献到不同的 data-xyz 属性中。问题是总是获得每场比赛的所有类别。例如以下 HTML:

<span class="note-123 index-3 green">Hello</span> <span class="index-456 red">World<span>

到目前为止，我的正则表达式是 /<span class="([^\"\s]*)\s*/ 并且它与 first 类匹配。在本例中为 note-123 和 index-456

但是如果我想获取每个元素的所有类，我可以使用 /<span class="([^\"\s]*)\s*([^\"\s]*)\s*([^\"\s]*)\s*/ 。直到三个类和第二个类的结果返回 index-456 、 red 和空字符串为止。

是否有可能无论有多少类别，在每场比赛中总是获得所有类别？类似于 Javascript 中的嵌套循环？

我很高兴能得到你们的帮助。

Answer 1

您可以在不使用正则表达式的情况下获取类，使用 querySelectorAll 查找所需的元素并使用 classList 获取类名称。

然后使用例如 add 或 remove 方法。

或者使用 DOMParser 。

注意关闭最后一个跨度。

let elms = document.querySelectorAll("span");
elms.forEach(e => {
  for (let value of e.classList.values()) {
    console.log(value);
  }
});

<span class="note-123 index-3 green">Hello</span> <span class="index-456 red">World</span>