javascript - 从 html 文本中提取所有 css 类

Question

例如，我有一个 html 作为文本字符串

var html="bla<p class="  c1 c2">blabla<button></button><div id="bla" class="c1   c3 "></div>"

我想将所有唯一类提取到一个数组中。所以我想要这样的结果:

classes=['c1','c2','c3']

我尝试使用 regexp 但无法弄清楚如何分组和收集所有单独的类，以及如何仅将唯一的类提取到数组中？

请注意 - 我需要一个普通的 javascript(无 jquery)解决方案!

Answer 1

你可以这样做:

var html = "bla<p class='c1 c2'>blabla<button></button><div id='bla' class='c1 c3'></div>";

var classes = []; // empty array

html.replace(/class=['"][^'"]+/g, function(m){ // https://regex101.com/r/jD0wX1/1
    classes = classes.concat(m.match(/[^'"]+$/)[0].split(' ')); // https://regex101.com/r/jD0wX1/2
}); // take all classes

classes = classes.filter(function(item, pos) {
    return classes.indexOf(item) == pos;
}); // return unique classes

console.log(classes); // Run code snippet -> then press f12 to see the array

希望对您有所帮助。