Question

我有一个字段供用户输入CSS选择器，我想检查它是否有效（根据css3 specification）。我尝试使用css3 specification中建议的another stackoverflow topic中的表达式，但它不起作用 - 我构建的正则表达式与有效选择器不匹配。我现在所拥有的只是：

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

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

我正在寻找的是document.validateSelector或库，用于解析CSS选择器。

Answer 1

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

自执行换行功能可确保只有一个隐藏的dummy无法与之混淆。

const isSelectorValid = (qs => (
  selector => {
    try { qs(selector) } catch (e) { return false }
    return true
  }
))(s => document.createDocumentFragment().querySelector(s))

console.log(isSelectorValid("a#x#y"), isSelectorValid("a?+"));

Answer 2

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

Answer 3

感谢@kornieff提示，我已经找到了使用jsdom的nodejs的答案，如果它可以帮助任何人：

const jsdom = require("jsdom");
const { JSDOM } = jsdom;
const { document } = (new JSDOM('')).window;

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

const isSelectorValid = selector => {
  try { queryCheck(selector) } catch { return false }
  return true
}
console.log(isSelectorValid("a#x#y"), isSelectorValid("a?+"));

Answer 4

如果选择不，document.querySelector()将返回null。如果选择器存在，则document.querySelector()将返回该元素。

这里是working JSFiddle。

检查CSS选择器是否有效

4 个答案: