Javascript有效解析css选择器

Question

解析css选择器输入字符串的最有效方法是什么,它具有以下任意组合:

• [key=value] :属性,0到*实例
• #id :ids,0到1个实例
• .class :classes,0到*实例
• tagName :标记名称,0到1个实例(仅在字符串的开头找到)

(注意:' *'或其他适用的组合器可用于代替标签？)

如:

div.someClass#id[key=value][key2=value2].anotherClass

进入以下输出:

[' div',' .someClass',' #id',' [key=value]',' [key2=value2]',' .anotherClass']

或者对于奖励积分,有效地进入这种形式(阅读:不仅仅基于使用的方式str[0] === '#'):

{
 tags : ['div'],
 classes : ['someClass','anotherClass'],
 ids : ['id'],
 attrs : 
   {
     key : value,
     key2 : value2
   }
}

(注意删除# . [ = ])

我想象正则表达式的一些组合,并且.match(..)是要走的路,但我的正则表达式知识远远不够先进,适合这种情况.

非常感谢您的帮助.

Answer 1

您可以使用分割

var tokens = subselector.split(/(?=\.)|(?=#)|(?=\[)/)

哪个改变了

div.someClass#id[key=value][key2=value2].anotherClass

至

["div", ".someClass", "#id", "[key=value]", "[key2=value2]", ".anotherClass"]

之后你只需看看每个令牌是如何启动的(并且在令牌开头的情况下[,检查它们是否包含一个=).

这是构建您描述的对象的整个工作代码:

function parse(subselector) {
  var obj = {tags:[], classes:[], ids:[], attrs:[]};
  subselector.split(/(?=\.)|(?=#)|(?=\[)/).forEach(function(token){
    switch (token[0]) {
      case '#':
         obj.ids.push(token.slice(1));
        break;
      case '.':
         obj.classes.push(token.slice(1));
        break;
      case '[':
         obj.attrs.push(token.slice(1,-1).split('='));
        break;
      default :
         obj.tags.push(token);
        break;
    }
  });
  return obj;
}

示范