Question

我正在使用AnythingSlider jQuery插件，它动态地读取URL中的哈希并通过jQuery选择页面上的项目。问题是最终用户如果到达http://mydomain.com/#!demos/slider就可以破解插件。

有没有办法测试选择器是否有效而不是让jQuery崩溃（内置函数或正则表达式）？看到这个试图做$（'＃！demos / slider'）的jsFiddle示例，它崩溃了：http://jsfiddle.net/PvY2b/

$('#!demos/slider') <= Uncaught Error: Syntax error, unrecognized expression: #!demo/slider

Answer 1

ID和NAME令牌必须以字母（[A-Za-z]）开头，可能是后跟任意数量的字母，数字（[0-9]），连字符（＆＃34; - ＆＃34;），下划线（＆＃34; _＆＃34;），冒号（＆＃34;：＆＃34;）和句号（＆＃34;。＆＃34;）。

来自：Basic HTML data types

因此，这样的事情可能有效：

if (/^[A-Za-z][A-Za-z0-9\-_:\.]*$/.test(selector)) {
    // $('#' + selector)...
}

或者只是逃避它：

selector = selector.replace(/([;&,\.\+\*\~':"\!\^#$%@\[\]\(\)=>\|])/g, '\\$1');

Answer 2

将此块包装到try-catch中可能更容易，例如：

try { 
  $('#!demo/pages') 
} catch(e) { 
  alert('Your selector is invalid'); 
}

这不是一个懒惰的黑客：在处理一些你无法直接控制的外部组件时，这是一种非常常见的方法。

Answer 3

如上一个答案所示：How do I extend jQuery's selector engine to warn me when a selector is not found?

你必须扩展jQuery init：

var oldInit = $.fn.init; // cache it

$.fn.init = function(selector, context, rootjQuery) {

    var result = new oldInit(selector, context, rootjQuery);

    if (result.length === 0)
        console.info("jQuery call has no elements!", arguments);
    return result;
};

它仍然会为错误的语法选择器抛出错误，但是假设你有一个正确的$('#test')，如果没有#test存在，它至少会警告你。有利于发展，帮助打字错误等

我已经使用.on()和其他事情做到了这一点，它非常强大。

如何测试选择器在jQuery中是否有效

3 个答案: