Javascript有效解析css选择器

时间:2013-07-26 18:03:11

标签: javascript regex css-selectors

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

  • [key=value]:属性,0到*实例
  • #id:ids,0到1个实例
  • .class:classes,0到* instances
  • 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(..)的一些组合是可行的方法,但我的正则表达式知识远远不够先进。

非常感谢你的帮助。

1 个答案:

答案 0 :(得分:6)

您可以使用

进行拆分
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;
}

demonstration