gpt4 book ai didi

javascript高效解析css选择器

转载 作者:塔克拉玛干 更新时间:2023-11-02 22:49:35 24 4
gpt4 key购买 nike

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

  • [key=value] : 属性,0 到 * 实例
  • #id : ids, 0 to 1 instances
  • .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(..) 的某种组合是可行的方法,但我的正则表达式知识远远不够先进,无法应对这种情况。

非常感谢您的帮助。

最佳答案

您可以使用

进行拆分
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选择器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17888039/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com