Question

我编写了非常基本的正则表达式来验证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"]'
];

Answer 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

用于querySelectorAll参数的regex验证器

1 个答案: