JS:转义字符串末尾带有反斜杠的字符串，用于与jQuery函数一起使用

JS: Escaping a string with backslash at the end of a string, for using with jQuery functions

本文关键字：字符串 用于 jQuery 函数 一起 转义字符 转义 JS      更新时间：2023-09-26

我有一个像"CS5990+-&|！(){}[]^'"~*?:'''"

我想将此字符串用作表达式中的选择器，例如

$('[data-name="' + string + '"]')

其中字符串是上面的字符串。但是jquery的嘶嘶声会因为最后一个斜杠而抛出错误。无论如何，我可以转义这个字符串并仍然使用此字符串作为选择器吗？我尝试了 escape（），但它抛出了一个错误。请帮忙

要使用任何元字符（例如 !'"#$%&'()*+,./:;<=>?@[]^'{|}~ ） 作为名称的文字部分，它必须 使用两个反斜杠进行转义：''''。 - http://api.jquery.com/category/selectors/

对于选择器中的属性值，似乎您只需对反斜杠和引号进行双重转义即可，例如

var string = "CS5990+-&|!(){}[]^'''"'~*?:''''";

http://jsfiddle.net/9PF4G/1/

下面是一个转义选择器中特殊字符的函数：

function escapeSelector(selector) {
    selector = selector.replace(/''/g,'''''');
    return selector.replace(/([ #;&,.+*~'':"@!^$[']()<=>|'/'{'}'?])/g,'''$1');
}

http://jsfiddle.net/9PF4G/5/

给定的代码片段有问题：

$('[data-name="' + string + '"]');

变量部分是string 。假设这是用户控制的输入会有所帮助。（它可能不适用于您的特定用例，但无论如何，您的问题的解决方案都是相同的，以这种方式思考它会使无法正确解决此问题的危险更加清晰。

想象一下，如果string包含"会发生什么，例如 string === 'foo"bar' . 这将产生[data-name="foo"bar"]，脱离属性选择器，可能会破坏整个CSS选择器并导致抛出异常。

更糟糕的是，想象一下，如果string像'"], #my-evil-selector, [x="'这样精心设计的价值会发生什么。在这种情况下，我们得到：

[data-name=""], #my-evil-selector, [x=""]

换句话说，选择器现在可能会选择与预期完全不同的元素。这可能是一个安全问题！

解决方案是双重的：

  1. 将string包装在呼叫CSS.escape中。无论string保存哪个字符串值，CSS.escape(string)始终生成有效的 CSS 标识符。

  2. 由于我们现在有一个有效的 CSS 标识符，我们可以再在属性值两边加上引号。（或者，要保留引号，您必须将string转换为有效的 CSS 字符串文字，这似乎更难做到，没有任何好处。

所以最终的解决方案是：

$('[data-name=' + CSS.escape(string) + ']');

有趣的事实：在Chrome DevTools中检查元素时，右键单击菜单提供了一个"复制JS路径"选项，该选项与此非常相似。它生成一个形式的 JavaScript 片段：

document.querySelector("#foo-bar-baz")

。其中 ID（或选择器中出现的任何其他内容）本质上是用户提供的输入 - 它由网页提供！

你猜怎么着？旧的实现出错了转义，在某些情况下生成了无效的 JavaScript 代码，而在其他情况下生成了无效的 UTF-8。

修复（和简化）代码的补丁遵循我上面描述的逻辑。

用"''"转义你的"''"和""

string = 'CS5990+-&|!(){}[]^'"~*?:'''

试试这个：

var string = 'CS5990''+''-''&''|''!''('')''{''}''['']''^''"''~''*''?'':''''';
alert($('#'+string).val());
相关文章：