jQueryでエスケープしよう!

jQueryでエスケープしよう!

文字列のエスケープは自作の関数を定義する必要がありますが、HTMLを追加するには.text()を使用します。

文字列をエスケープするには?

jQueryには、文字列をエスケープするメソッドは実装されていません。

以下の関数を定義し、escapeHTML()に文字列を渡せば、エスケープ後の文字列を取得できます。

function escapeHTML(string) {
    let strings = {
        '&': '&',
        '<': '<',
        '>': '>',
        '"': '"',
        "'": ''',
        '/': '/',
        '`': '`',
        '=': '='
    };

    return String(string).replace(/[&<>"'`=\/]/g, function(s) {
        return strings[s];
    });
}

エスケープする文字をプロパティ、エスケープ後の文字を値とするオブジェクトを定義し、対象文字を正規表現で置換しています。

String(string)

String()に変数を渡し、文字列に変換しています。

.replace(/[&<>"'`=\/]/g, function(s) {
    return strings[s];
});

.replace()の第1引数にエスケープする文字にマッチする正規表現、第2引数にコールバック関数を渡し、一致した文字に対し、コールバック関数を実行します。

コールバック関数は、オブジェクトからエスケープ後の文字を取り出して返します。

正規表現により、エスケープする文字の全てが置換されるため、結果として、文字列全体がエスケープされます。

returnでエスケープされた文字列を返し、処理が完了します。

エスケープしてHTMLに追加するには?

$('div').text('<span>エスケープされます</span>');

エスケープしてHTMLに追加するには、.text()に文字列を渡します。

サンプルでは、渡された文字列がdiv要素に追加されますが、<span></span>は文字列として認識されます。

エスケープさせないでHTMLに追加するには?

$('div').html('<span>エスケープされません</span>');

エスケープさせないでHTMLに追加するには、.html()にHTML文字列を渡します。

サンプルでは、<span></span>はHTMLタグとして追加されます。

セレクタをエスケープするには?

セレクタで「.escape」のclassを持つ要素を選択したいとします。

$('..escape')
Uncaught Error: Syntax error, unrecognized expression: ..escape

セレクタは、ピリオドをクラス名の指定として認識するため、認識できない表現として文法エラーが発生してしまいます。

$('.' + $.escapeSelector('.escape'))

$.escapeSelector()に文字列を渡すと、セレクタで使用できるようにエスケープされた文字列が返されます。

先頭にピリオドを追加すれば、ピリオドを含んだclassを選択できます。

jQueryのエスケープシーケンスは?

\(バックスラッシュ)の後に特定の文字を入力することにより、特殊な出力が行われます。

jQueryのエスケープシーケンスを一覧にまとめました。

\bバックスペース
\f改ページ
\n改行
\rキャリッジリターン
\t水平タブ
\v垂直タブ
\0ヌル文字
\’シングルクォーテーション
\”ダブルクォーテーション
\\バックスラッシュ

バックスラッシュを入力する場合、\\のように2つ続ける必要があることに注意しましょう。

まとめ

  • 文字列をエスケープするには、自作の関数を定義します。
  • エスケープしてHTMLに追加するには、.text()を使用します。
  • エスケープさせないでHTMLに追加するには、.html()を使用します。
  • セレクタをエスケープするには、$.escapeSelector()を使用します。
  • バックスラッシュの後に文字を追加すると、エスケープシーケンスとして扱われます。

入門カテゴリの最新記事