检查CSS选择器是否有效

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

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

但它似乎并不像一个很好的解决方案 - querySelector功能是专为越来越元素，和选择的检查只是一个副作用。此外，它没有提供关于选择器有什么问题的任何信息。

我在找的东西就像document.validateSelector或解析CSS选择器的库。

来源

2016-01-18 Vlad Shevchenko

有什么问题你这样做的方式吗？就我所知，这是首选方法。 –

用户如何插入选择器？例如，对于一个类是输入'.className'？基本上，你是否在'selector'或'id'的适当标识符前加上'selector'？ –

@Brett DeWoody，是的，他们应该像在.css文件中一样输入选择器，我不会以任何方式改变它。 –

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

来源

2016-01-18 07:15:48

已经有一个库，它是内置在浏览器中的CSS选择器解析器。该“库”通过投掷报告错误。我没有看到任何理由引入另一个解析器。 –

为什么产生运行时错误，如果有可能避免它们。库可以提供有关无效选择器的更多详细信息。 'document.querySelector（selector）'用于查询DOM，但不检查选择器的有效性。 –

-1

在选择器不是存在的情况下，document.querySelector()将返回null。在选择器是目前document.querySelector()将返回元素。

这里是working JSFiddle。

来源

2016-01-18 07:32:40

至少在Chrome中，无效的选择器会导致运行时错误。你的小提琴在'Document'上产生错误“Uncaught SyntaxError：无法执行'querySelector'：'4 $$＃＆*（'不是一个有效的选择器。” –

嗯，我使用Chrome并没有看到错误 –

不，如果选择器无效，会引发错误，请尝试使用选择器“％^ @＃” 以下是引用来源[MDN]（https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector）：如果指定的选择器组无效，会抛出一个SYNTAX_ERR异常 –

原创思路的问题是它会搜索整个文档。慢！！！但是，如果我搜索一个虚拟元素，不能有孩子，甚至没有连接到DOM，它应该没问题！

自执行包装函数确保只有一个隐藏的dummy不能被混淆。

var isSelectorValid = (function (selector) { 
 
    var dummy = document.createElement('br'); 
 
    
 
    return function (selector) { 
 
    try { 
 
     dummy.querySelector(selector); 
 
    } catch (e) { 
 
     return false; 
 
    } 
 

 
    return true; 
 
    }; 
 
}()); 
 

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

来源

2017-02-10 01:04:44 kornieff

这工作，我找到的唯一解决方案 –

这是天才，谢谢 –

检查CSS选择器是否有效

回答

相关问题