querySelectorAll 参数的正则表达式验证器答案

【问题标题】：regex validator for querySelectorAll argumentquerySelectorAll 参数的正则表达式验证器
【发布时间】：2020-07-26 08:55:41
【问题描述】：

我已经编写了非常基本的正则表达式来验证 querySelectorAll() 方法的参数。验证了一些随机值，似乎它工作正常。

我只是想知道是否可以进行一些改进。

正则表达式可能会遗漏一些验证，但我的主要问题是关于我的方法，关于我编写这个正则表达式的方式。我对正则表达式也很陌生。如果我在性能方面犯了任何重大错误，请指出我。

var p = /^([A-Za-z0-6]*|\*)?((?:(?:#|\.|:|\[)[-A-za-z0-9()+\s"=|^$*]+)*)$/;

/* 


[A-Za-z0-6]* Type selector
\* Universal selector
#|\.|:|\[ for id,class,attribute and psuedo classes
[-A-za-z0-9()+\s"=|^$*]+ id,class, attribute or pseudo class value


*/

var stringArray = [
"div",
"div:first-child",
"div#id",
"div123",
"h1",
"*.warning",
".warning",
"*#myid",
"#myid",
"p.pastoral.marine",
"h1#chapter1",
"*#z98y",
"a.external:visited",
"a:visited",
"a:focus:hover",
"tr:nth-child(2n+1)",
"tr:nth-child(odd)",
"p:nth-child(4n+4)",
"foo:nth-child(0n+5)",
"foo:nth-child(5)",
":nth-child( 3n + 1 )",
"img:nth-of-type(2n+1)",
"h2:nth-of-type(n+2):nth-last-of-type(n+2)",
"h2:not(:first-of-type):not(:last-of-type)",
"h1[title]",
'span[class="example"]',
'span[hello="Cleveland"][goodbye="Columbus"]',
'a[hreflang|="en"]',
'object[type^="image"]',
'a[href$=".html"]',
'p[title*="hello"]'
];

【问题讨论】：

这些正则表达式将只匹配细节。这是你想要的，还是一般的选择器？如果是这样;你需要不同的（可能更少）正则表达式匹配。
.. a b, a > b, a + b, a ~ b, 等等.. 还有a::before, a::after, a::first-letter, 等等。可以这样查吗？
是的 Paul，我只是在寻找没有组合符的简单选择器序列
不确定，但也许 JCSSP 对你有用，使用解析而不是正则表达式？ glazman.org/JSCSSP
@PK：你怎么知道可以通过这种方式检查它们（我假设这就是你的“是”的意思）？从理论上讲，验证与querySelectorAll() 一起使用的选择器的最准确方法是调用它并查看它是否引发异常，但这可能会导致不必要的性能开销。

标签： javascript css regex css-selectors selectors-api

【解决方案1】：

验证querySelectorAll 的选择器最简洁可靠的方法是调用函数本身并检查它是否抛出：

const validateSelector = selector => {
  try { document.querySelectorAll(selector) }
  catch { return false }
  return true;
}

console.log(validateSelector('abc!?#&^123')); // false
console.log(validateSelector('div > text')); // true

【讨论】：