css选择器的Javascript高效解析

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

• [key=value]

  ：属性，0到*实例

• #id

  ：id，0到1个实例

• .class

  ：类，0到*实例

• 标记名

  ：标记名，0到1个实例（仅在字符串开头找到）

（注意：“

*

”，或其他适用的组合符可代替标记？）

例如：

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

输入以下输出：

[“

div

”、“

.someClass

”、“

#id

”、“

[key=value]

”、“

[key2=value2]

”、“

.anotherClass

”]

或者，为了获得奖励积分，请高效地输入此表单（例如，阅读：一种不仅仅基于使用

str[0]=='#'

的方式）：

（注意删除

#.[=]

）

我想将正则表达式和

.match（…）

结合起来是一条可行之路，但我的正则表达式知识远远不够先进，不足以应付这种情况

---

非常感谢您的帮助。

您可以使用

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

哪些改变

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

---

regex很少是复杂语言解析的正确解决方案。你应该看看许多这样做的库（比如sizzle）。我知道sizzle会这么做，但我希望实现我自己的简单解决方案。域没有语言复杂，没有空格等，分隔符的格式有限（如问题所列）我建议查看源代码，而不是使用它。如果要解析css选择器，应该考虑空格。好的，我会参考源代码，但我说的是已按空格分割的标记。这个问题是关于分割以空格分隔的标记后的下一步whitespace@dystroy我认为这是关于解析s选民“子语法”对于单个元素匹配；我不确定这叫什么。另外SCRIPTONITE注意，它不仅仅是在空格上拆分-空格是CSS选择器语法中的一个运算符，与

+

和

~

连接器类似。这是一个很好的开始，尽管我同意@Gumbos point。有没有办法使属性searc为了避免这个问题，h比其他搜索更“贪婪”？Gumbo我回答了书面问题，而不是关于任何CSS选择器的另一个问题，因为尝试在几行javascript中实现这一点是注定要失败的。

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