javascript - Ajax 在查询中使用 ' 进行搜索

Question

我有一个字段，用户可以在其中搜索名称，并且将显示相应的字段:

$('.search').keyup(function(){
        var name = $(this).val();
        delay(function(){
            if(name != ""){
                $('[data-load]').parent().hide(function(){
                    $("[data-name^="+name+"]").parent().parent().fadeIn();
                });
            }
            if(champ == ""){
                $('[data-load]').parent().show();
            }
        }, 1000 );
    });

    var delay = (function(){
        var timer = 0;
        return function(callback, ms){
            clearTimeout (timer);
            timer = setTimeout(callback, ms);
        };
    })();

仅当用户不搜索像“O'Hara”这样的名称时才有效，这会破坏 javascript:

Error: Syntax error, unrecognized expression: [data-name^=O']

启用这些名称搜索的正确方法是什么？

Answer 1

当使用attribute selectors时就像[attrName ^= attrValue]，

Attribute values must be CSS identifiers or strings.

在示例中，O'Hara 应转义为 O\'Hara、"O'Hara" 或 '奥哈拉。

一般来说，标识符比字符串具有更多的限制，因此如果您使用它们，您将需要转义大量字符。因此，我建议使用字符串，即用单引号或双引号将值括起来。字符串的值可以是任何值，但有以下限制:

• Double quotes cannot occur inside double quotes, unless escaped (e.g., as '\"' or as '\22'). Analogously for single quotes (e.g., "\'" or "\27").

• A string cannot directly contain a newline. To include a newline in a string, use an escape representing the line feed character in ISO-10646 (U+000A), such as "\A" or "\00000a".

• 反斜杠 (\) 用作转义字符。因此必须转义文字反斜杠。

因此，您可以使用

$("[data-name ^= '"
   + name.replace(/["'\\]/g, '\\$&').replace(/\n/g, '\\a ')
+ "']")

var name = "0a\"b'c\\d\ne";
document.querySelector(
  "[data-name ^= '"
    + name.replace(/["'\\]/g, '\\$&').replace(/\n/g, '\\a ')
  + "']"
).style.color = 'blue';

<div data-name="0a&quot;b'c\d
ef">I should be blue</div>

或者，如果您的浏览器支持，您可以使用 CSS.escape

$("[data-name ^= " + CSS.escape(name) + "]")

var name = "0a\"b'c\\d\ne";
document.querySelector("[data-name ^= " + CSS.escape(name) + "]")
.style.color = 'blue';

<div data-name="0a&quot;b'c\d
ef">I should be blue</div>