JavaScriptのエスケープあれこれ

お久しぶりです。寺岡です。

たまにはRuby以外の記事も書いてみようと思ったので、
知っておきたいJavaScriptのエスケープ処理に関する小ネタを紹介します。

encodeURI, decodeURI は使わない

JavaScriptでURLエンコーディングを行う場合に、encodeURI, decodeURIを使用してはいけません。
これらの関数は「:」や「/」などの、URL上で意味を持つ記号は処理してくれません。

encodeURIComponent, decodeURIComponentを使いましょう。

実例で見てみます。
「あいうえお」という文字列を対象としている場合は結果は同じですが、
「http://」という文字列を対象とした場合、結果が異なることがわかります。

encodeURIやdecodeURIを利用しないと上手くいかないという場合はプログラムの構造を間違えている可能性が非常に高いので、一度見直してみると良いと思います。

HTMLをエスケープしたい

JavaScriptでDOMを使ってHTMLを組み立てるのは面倒です。

こんな時はinnerHTMLやjQueryを使って一気に組み立ててしまいたくなります。

しかし、attr1やcontentにタグに使われる記号である「<>"'」などがきた場合、HTMLを壊してしまいます。
これを回避するために、タグに埋め込む文字列はHTMLの実体参照にエスケープする必要があります。
PHPでいうhtmlspecialcharsですね。

残念ながらJavaScriptにはこの動作を行う組み込み関数がありません。
ですが、以下のコードで実装することは出来ます。

二つの関数のどちらもやっていることは同じで、以下の処理を行っています。

  1. ダミーのdiv要素を作成
  2. エスケープしたい文字をタグ内の文字列に設定
  3. div要素内のHTMLを取り出す

正規表現で置換することもできますが、この方法だとJavaScriptエンジンに
処理を任せられるのでスマートだと思います。

2013/4/18 追記
こちらの記事にあるように、この方法ではタグ内のテキストのエスケープには有効ですが、タグの属性値では「"」「'」がエスケープされないため危険です。
属性値の場合は正規表現などで置換するか、JavaScriptからDOMの属性に値を設定するべきでしょう。

Comments are closed, but you can leave a trackback: Trackback URL.

Comments

  • syuilo  On 2015年12月2日 at 16:08

    このHTMLエスケープの方法ですとJavaScriptがブラウザ上で実行されている時にしか使うのは難しいですね

    • 寺岡 佑起  On 2015年12月2日 at 16:22

      DOMが操作出来ることが前提になりますね。
      試したことはありませんが、jsdom を使えばいけるかもしれません。

  • 森建  On 2016年1月12日 at 16:37

    HTML のエスケープ処理ですが、こちらの Qiita の記事によると TextNode を使った方法では ' や " がエスケープされないみたいです。