从HTML文本中提取所有CSS类

你可以这样做:

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

希望能有所帮助。

这不是最漂亮的解决方案，但这里。

首先将字符串分成几部分

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();
}

我为你创建了一个regex，玩它，它为javascript和php regex服务，希望它有帮助:https://regex101.com/r/hR5mM0/4，只是使用它与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"]

这里是小提琴:https://jsfiddle.net/jnyym0ye/7/

这绝不是一个漂亮的解决方案，但使用RegEx的另一种选择是创建一个元素。将HTML作为内容提供给它，然后对它运行一个查询选择器，查找任何带有类的内容。然后，您可以遍历填充只有唯一类的数组的所有元素。

(function(){
  var html="bla<p class='c1 c2'>blabla<button></button><div id='bla' class='c1   c3 '></div>",
    div = document.createElement('div'),
    classed,
    classes = [],
    newClasses;
  div.innerHTML = html;
  classed = div.querySelectorAll('[class]');
  for(var i=0; i < classed.length; i++) {
    newClasses = classed[i].className.split(' ');
    for (var c = 0; c < newClasses.length; c++) {
      if (newClasses[c].trim() !== '' && classes.indexOf(newClasses[c]) === -1) {   classes.push(newClasses[c]);
    }
  }
}  
}())
/* classes == ['c1', 'c2', 'c3'] */

正如我所否认的那样，它并不漂亮，但它只是我想到的另一种路径。

或者在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]);
        }
    }
}

Try

function extract(html) {
  let m= html.match(/class=(".*?"|'.*?')/g)||[];            // class list
  let c= m.map(c=>c.replace(/class=("|')'s*/,'').slice(0,-1)); // only names
  return [...new Set(c.map(x=>x.split` `).flat())];         // del duplicates
}

// TEST
function print(classList) {
  output.value = extract(classList).reduce((a,c) => a+=`.${c} {'n}'n'n`, '')
}

<textarea id="inp" cols="70" rows="4" placeholder="Paste html"></textarea>
<br><button onclick="print(inp.value)">Extract CSS!</button><br><br>
<textarea id="output" cols="70" rows="4"></textarea>

基于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;
}

看到jsfiddle