3

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

  • [key=value]: 属性，0 到 * 个实例
  • #id : ids, 0 到 1 个实例
  • .class : 类，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(..)是要走的路，但是我的正则表达式知识对于这种情况还远远不够先进。

非常感谢您的帮助。

4

1 回答 1

9

您可以使用进行拆分

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

变化

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

至

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

之后，您只需查看每个令牌的开头方式（并且，如果令牌以 开头[，则检查它们是否包含 a =）。

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

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

示范

于 2013-07-26T18:11:18.507 回答