4

我正在使用 AnySlider 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
4

3 回答 3

5

ID 和 NAME 标记必须以字母 ([A-Za-z]) 开头，后跟任意数量的字母、数字 ([0-9])、连字符 ("-")、下划线 ("_") , 冒号 (":") 和句点 (".")。

来自：基本 HTML 数据类型

因此，这样的事情可能会起作用：

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

或者干脆逃避它：

selector = selector.replace(/([;&,\.\+\*\~':"\!\^#$%@\[\]\(\)=>\|])/g, '\\$1');
于 2012-12-20T19:47:35.160 回答
1

将这个块包装到 try-catch 中可能更容易，如下所示：

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

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

于 2012-12-20T19:50:08.727 回答
0

如上一个答案所示：如何扩展 jQuery 的选择器引擎以在找不到选择器时向我发出警告？

您必须扩展 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()和其他东西做了这个，它非常强大。

于 2012-12-20T19:51:22.387 回答