Javascript有效解析css选择器

2019-08-25 15:46:37 阅读：184 来源： 互联网

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

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

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

如：

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

进入以下输出：

[ ‘的div’, ‘SomeClass的’, ‘#标识’, ‘[键=值]’, ‘[键2 =值]’, ‘anotherClass’]

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

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

(注意删除#.[=])

我想象正则表达式和.match(..)的一些组合是可行的方法,但我的正则表达式知识远远不够先进.

非常感谢您的帮助.

解决方法:

您可以使用分割

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

标签：javascript,css-selectors,regex
来源： https://codeday.me/bug/20190825/1720485.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

Javascript有效解析css选择器