jQueryのセレクタでのエスケープ【現役エンジニアが解説】

PROGRAM

今回は、jQueryのセレクタでのエスケープについて、簡単に解説していきます。

jQueryでのエスケープ

jQueryではセレクタでエスケープが必要です。

セレクタとは$('#hoge')のように要素を特定する箇所です。

その他に関しては、jQuery特有のエスケープが必要な点はありません。

セレクタでのエスケープ対象の文字

セレクタでのエスケープ対象の文字は31文字あります。

 !"#$%&'()*+,./:;<=>?@[\]^`{|}~

具体的には上記の文字となっており、半角スペース(先頭)もあります。

#があることからもわかるように、純粋な文字ではなく別の意味に捉えられてしまうため、エスケープが必要となります。

セレクタでのエスケープの方法

例えば、以下のinput要素を想定します。

<input id="data[name]">

この場合、idにエスケープ対象の文字があるため、そのままセレクタで指定すると失敗します。

$("#data\\[name\\]");

上記のように、エスケープ対象の文字(今回の場合は[と]の2つの文字)の直前にバックスラッシュ(もしくは円マーク)を2つ付けることでエスケープすることができます。