Question

给定一个表示单个CSS选择器的字符串，例如这些（但理想情况下包括任何有效的选择器）如何编写一个函数来将选择器中使用的任何类提取到数组中？我希望能够在浏览器之外执行此操作，例如node.js.我使用的实际输出将来自reap(tree).selectors方法，但这里是示例。

将".example"解析为["example"]
将".example.state"解析为["example", "state"]
将"input[checked]"解析为[]
将".field:disabled .label"解析为["field", "label"]
将".flex\\@min-50em"解析为["flex\\@min-50em"]
将".flex-wrap.flex-reverse"解析为["flex-wrap", "flex-reverse"]

anwser应该使用像function extractClasses(selector) {}这样的函数来返回一个数组。或者找一个开源的npm包，以合理可靠的方式完成这项工作。

Answer 1

查看Emmet。将字符串展开为DOM元素，然后读取classList。

对于Node，使用js-dom之类的东西来创建Emmet元素。

Answer 2

嗯，这很容易，只是让它分开。和空格并删除任何空元素，并拆分：并返回第一个，这是你应该得到的：

function extractClasses(sel){
    var sel1=sel.split(".");
    var sel2=[];
    for(var i=0;i<sel1.length;i++){
        var sel3=sel1[i].split(" ");
        for(var i2=0;i2<sel3.length;i2++){
            var v=sel3[i2];
            if((v!="")&&(v.substr(0,"input".length)!="input")){
                if(v.replace(/\:/gim,"")!=v){v=v.split(":")[0];}
                sel2[sel2.length]=v;
            }
        }
    }
    return sel2;
}

使用JavaScript从CSS选择器中提取类

2 个答案: