Javascript 从html文本中提取所有css类

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

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

我尝试使用regexp，但无法理解如何对所有单独的类进行分组和收集，以及如何将唯一的类提取到数组中

---

注意-我需要一个简单的javascript（无jquery）解决方案请

这并不是最漂亮的解决方案，但还是这样

首先把绳子分成几部分

var parts = html.split(/class=/);
var classes = [];
for (var i = 0; i < parts.length-1; i++) {
    classes[i] = parts[i+1].split(/\'>/)[0].replace(/\'/).trim();
}

var parts=html.split（/class=/）；
var类=[]；
对于（变量i=0；i/）[0]。替换（/\'/）.trim（）；
}

这并不是最漂亮的解决方案，但现在开始

首先把绳子分成几部分

var parts = html.split(/class=/);
var classes = [];
for (var i = 0; i < parts.length-1; i++) {
    classes[i] = parts[i+1].split(/\'>/)[0].replace(/\'/).trim();
}

var parts=html.split（/class=/）；
var类=[]；
对于（变量i=0；i/）[0]。替换（/\'/）.trim（）；
}

您可以这样做：

var html=“bla
bla”；
变量类=[]；//空数组
replace（/class=[''”][^']+/g，函数（m）{//https://regex101.com/r/jD0wX1/1
classes=classes.concat（m.match（/[^'”）+$/）[0]。拆分（“”））；//https://regex101.com/r/jD0wX1/2
})//
类别=类别。过滤器（功能（项目、位置）{
退货类别。indexOf（项目）=pos；
})；//返回唯一类
console.log（classes）；//运行代码片段->然后按f12键查看数组

var html=“bla
bla”；
变量类=[]；//空数组
replace（/class=[''”][^']+/g，函数（m）{//https://regex101.com/r/jD0wX1/1
classes=classes.concat（m.match（/[^'”）+$/）[0]。拆分（“”））；//https://regex101.com/r/jD0wX1/2
}); // 参加所有课程
类别=类别。过滤器（功能（项目、位置）{
退货类别。indexOf（项目）=pos；
}); // 返回唯一类
console.log（类）；//运行code snippet->然后按f12键查看数组
我为您创建了一个正则表达式，使用它，它为javascript和php正则表达式服务，希望它有帮助：，只需与javascript一起使用即可：

var re = /class="(.*?)"/g; 
var str = 'bla<p class="c1 c2">blabla<button></button><div id="bla" class="c1 c3"></div>';
var m;
var arr = []; 
while ((m = re.exec(str)) !== null) {
    arr = arr.concat(arr, m[1].split(" ") );
}
arr = arr.filter(function(item, pos, self) {
    return self.indexOf(item) == pos;
});

console.log(arr); //["c1", "c2", "c3"]

var re=/class=“（.*）”/g；
var str='bla
blabla'；
var-m；
var-arr=[]；
while（（m=re.exec（str））！==null）{
arr=arr.concat（arr，m[1]。拆分（“”）；
}
arr=arr.filter（功能（项目、位置、自身）{
返回自身索引（项目）=位置；
});
控制台日志（arr）//[“c1”、“c2”、“c3”]

这里是小提琴：
我为您创建了一个正则表达式，使用它，它为javascript和php正则表达式服务，希望它有帮助：，只需与javascript一起使用即可：

var re = /class="(.*?)"/g; 
var str = 'bla<p class="c1 c2">blabla<button></button><div id="bla" class="c1 c3"></div>';
var m;
var arr = []; 
while ((m = re.exec(str)) !== null) {
    arr = arr.concat(arr, m[1].split(" ") );
}
arr = arr.filter(function(item, pos, self) {
    return self.indexOf(item) == pos;
});

console.log(arr); //["c1", "c2", "c3"]

var re=/class=“（.*）”/g；
var str='bla
blabla'；
var-m；
var-arr=[]；
while（（m=re.exec（str））！==null）{
arr=arr.concat（arr，m[1]。拆分（“”）；
}
arr=arr.filter（功能（项目、位置、自身）{
返回自身索引（项目）=位置；
});
控制台日志（arr）//[“c1”、“c2”、“c3”]

这里有一个难题：
决不是一个漂亮的解决方案，但是使用正则表达式的一个替代方法是创建一个元素。将HTML作为内容提供给它，然后对它运行一个查询选择器，以查找任何带有类的内容。然后可以迭代所有元素，这些元素只使用唯一类填充数组


（函数（）{
var html=“bla
bla”，
div=document.createElement（'div'），
分类，
类别=[]，
新班级；
div.innerHTML=html；
classed=div.querySelectorAll（“[class]”）；
对于（var i=0；i/*classes==['c1'，'c2'，'c3']*/
决不是一个很好的解决方案，但是使用正则表达式的替代方法是创建一个元素。将HTML作为内容提供给它，然后对它运行一个查询选择器，以查找任何带有类的内容。然后可以迭代所有元素，这些元素只使用唯一类填充数组


（函数（）{
var html=“bla
bla”，
div=document.createElement（'div'），
分类，
类别=[]，
新班级；
div.innerHTML=html；
classed=div.querySelectorAll（“[class]”）；
对于（var i=0；i/*class==['c1'，'c2'，'c3']*/
基于上面的John Diaz答案，以下是我的解决方案：

var str = 'bla<p class="c1 c2">blabla<button></button><div id="bla" class="  c1    c3 "></div>';
var classes=getHTMLclasses(str);
console.log(classes);


function getHTMLclasses(html) {
    // get all unique css classes in html into dict
    var classRegexp = /class=['"](.*?)['"]/g;
    var dict = [];
    var m;
    while ((m = classRegexp.exec(html))) 
    {
        var classes=m[1].replace(/\s+/g, ' ').trim();
        classes.split(" ").forEach(function(item) {
            dict[item]=true;
        });
    }

    // convert dict to arr
    var arr=[];
    for (var key in dict) arr.push(key);

    return arr;
}

var str='bla
blabla'；
var类=getHtmlClass（str）；
console.log（类）；
函数GetHtmlClass（html）{
//将html中所有唯一的css类放入dict
var classRegexp=/class=['”]（.*？['”]/g；
var-dict=[]；
var-m；
而（（m=classRegexp.exec（html）））
{
var classes=m[1]。替换（/\s+/g'，）.trim（）；
class.split（“”）.forEach（函数（项）{
dict[项]=真；
});
}
//将dict转换为arr
var-arr=[]；
for（dict中的var键）arr.push（键）；
返回arr；
}

请参见
基于上述约翰·迪亚兹的答案，以下是我的解决方案：

var str = 'bla<p class="c1 c2">blabla<button></button><div id="bla" class="  c1    c3 "></div>';
var classes=getHTMLclasses(str);
console.log(classes);


function getHTMLclasses(html) {
    // get all unique css classes in html into dict
    var classRegexp = /class=['"](.*?)['"]/g;
    var dict = [];
    var m;
    while ((m = classRegexp.exec(html))) 
    {
        var classes=m[1].replace(/\s+/g, ' ').trim();
        classes.split(" ").forEach(function(item) {
            dict[item]=true;
        });
    }

    // convert dict to arr
    var arr=[];
    for (var key in dict) arr.push(key);

    return arr;
}

var str='bla
blabla'；
var类=getHtmlClass（str）；
console.log（类）；
函数GetHtmlClass（html）{
//将html中所有唯一的css类放入dict
var classRegexp=/class=['”]（.*？['”]/g；
var-dict=[]；
var-m；
而（（m=classRegexp.exec（html）））
{
var classes=m[1]。替换（/\s+/g'，）.trim（）；
class.split（“”）.forEach（函数（项）{
dict[项]=真；
});
}
//将dict转换为arr
var-arr=[]；
for（dict中的var键）arr.push（键）；
返回arr；
}

请参见
或Java，如果它有助于您的事业：

import java.nio.file.Files;
import java.nio.file.Paths;
import java.util.Arrays;
import java.util.HashSet;
import java.util.regex.Matcher;
import java.util.regex.Pattern;

//reads in file passed as argument, or called index.html & prints out a list of all classes with dupes removed.
public class CSSApp {

    public static void main(String[] args) throws Exception{
        byte[] encoded = Files.readAllBytes(Paths.get( (args.length > 0) ? args[0] : "index.html"));
          
        String html = new String(encoded, "UTF-8");
        HashSet<String> noDupes = new HashSet<String>();
        Matcher m = Pattern.compile("class=['\"](.*?)['\"]")
                 .matcher(html);
        while (m.find()) {
            String [] occurences = m.group().replaceAll("class=", "").replaceAll("\"", "").replaceAll("'", "").split("([ ]){1,}");
            for(int i = 0; i < occurences.length; i++) {
                noDupes.add(occurences[i]);
            }
        }
        
        String [] classes  = noDupes.toArray(new String[] {});
        Arrays.sort(classes);
        
        for(int i = 0; i < classes.length; i++) {
            System.out.println(classes[i]);
        }
    }
}

导入java.nio.file.Files；
导入java.nio.file.path；
导入java.util.array；
导入java.util.HashSet；
导入java.util.regex.Matcher；
导入java.util.rege