检查CSS选择器是否有效

Question

我有一个字段供用户输入CSS选择器,我想检查它是否有效(根据css3规范).我尝试使用css3规范中的表达式,如另一个stackoverflow主题中所建议的那样,但它不起作用 - 我构建的正则表达式与有效选择器不匹配.我现在拥有的只是:

try {
     document.querySelector(selector);
} catch (e) {
     // handle bad input
}

但它似乎不是一个好的解决方案 - querySelector函数是为获取元素而设计的,而选择器的检查只是一个副作用.此外,它不提供有关选择器出错的任何信息.

我正在寻找的是document.validateSelector用于解析CSS选择器的类似的东西.

Answer 1

原始想法的问题是它将搜索整个文档.慢!!!但是如果我们搜索一个甚至没有附加到DOM的空轻量级元素,它应该没问题!

自执行包装功能确保只有一个隐藏dummy不能被搞乱.

const qs = s => document.createDocumentFragment().querySelector(s)

const isSelectorValid = selector => {
  try { qs(selector) } 
  catch (e) { return false }
  return true
}


console.log(isSelectorValid("a#x#y"), isSelectorValid("a?+"))

Answer 2

您可以使用库来验证选择器是否有效，并可能从解析中获取更多详细信息。检查css 选择器解析器。