javascript - css/js属性セレクター[attr=value]で属性値を適切にエスケープする方法は？

Question

css / js属性セレクターで属性をエスケープするにはどうすればよい[attr=value]ですか？

具体的には、これは正しいですか？

document.querySelector('input[name="test[33]"]')

Sizzleが実行の重いフォールバック関数を使用したくないので、これを行うための「標準的な方法」を探しています。

Answer 1

はい、それは正しいアプローチの1つです。セレクターレベル3仕様には、次のように記載されています。

属性値はCSS識別子または文字列である必要があります。

質問の例では、属性値として文字列を使用しています。「識別子」は次のように定義されます。

CSSでは、識別子...には、文字[a-zA-Z0-9]とISO10646文字U+ 00A0以上、およびハイフン（-）とアンダースコア（_）のみを含めることができます。数字、2つのハイフン、またはハイフンの後に数字を続けることはできません。識別子には、エスケープ文字と任意のISO10646文字を数値コードとして含めることもできます。

したがって、その後、特殊文字をエスケープして引用符を省略することも合法です。

document.querySelector('input[name=test\\[33\\]]')