如何通过正则表达式获取所有类名答案

【问题标题】：How can i get all class name by regex如何通过正则表达式获取所有类名
【发布时间】：2021-04-13 06:26:43
【问题描述】：

let string = `<img class="img-fluid big-img logo">
<a class="link link-red link-2">link</a>`;

我想通过正则表达式而不是其他方式获取所有类名

我想把它们放在一个数组中，比如：

let allClass = ["img-fluid", "big-img", "logo", "link",......];

【问题讨论】：

Don't use regex to parse markup/html
我们希望您已经做了一些研究并编写了一些代码。
DOMParser + .classList
我尝试了正则表达式，但我的模式没有按预期工作。我知道如何使用 dom 函数来做到这一点，但我想把它作为一个字符串来做，并想通过正则表达式获取类名
重复stackoverflow.com/questions/42152454/…

标签： javascript html css regex

【解决方案1】：

也许你可以这样做：

var pattern = /class="([^"]+)"/g;
var classes = [];

[...string.matchAll(pattern)].
    forEach(
        match => classes = classes.concat( (match[1].split(" ")) )
    );

console.log(classes); // ["img-fluid", "big-img", "logo", "link", "link-red", "link-2"]

实际上，我们有一个匹配class="..." 的正则表达式，并捕获引号内的所有内容。然后我们运行 matchAll 并添加 扩展运算符 (...)，以便它生成一个我们可以使用 forEach 迭代的数组。

然后我们简单地遍历数组，将捕获的字符串拆分成一个数组并与classes数组合并

【讨论】：

【解决方案2】：

我找到了一个解决方案，但我不知道它的效率如何，但它确实有效

let regex = /class="(?:([\w+\-])(?:\s|")?){1,}/g;
    let collectClass = [];
    string.match(regex).forEach(item => {    item.replace(`class=`, "").replace(`"`, "").split(" ").forEach(item => collectClass.push(item))    })
    allClass = collectClasses.filter((value, index, self) => self.indexOf(value) === index);

【讨论】：