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

希望它有所帮助。

Answer 2

这不是最漂亮的解决方案，但现在就去了。

首先将字符串拆分为

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

Answer 3

我为你创建了一个正则表达式，玩它，它用于javascript和php正则表达式，希望它有帮助：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/

Answer 4

绝不是一个漂亮的解决方案，但使用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'] */

如上所述，它并不漂亮，但只是我提出的另一条路线。

Answer 5

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

Answer 6

基于上面的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

从html文本中提取所有css类

6 个答案: