escape

  • 非推奨、Web標準から削除されている
  • ブラウザやそのバージョンにより仕様が違う
  • 変換されない文字がある

encodeURI

  • UTF8ベースのエンコード
  • その名の通り、URIそのものを渡しエンコードしてもらうもの
  • そのため、URI内で意味をもつ#$&+,/:;=?@の文字は変換されない
  • スペースのエンコードは+ではなく%20

encodeURIComponent

  • UTF-8ベースのエンコード
  • その名の通り、URIを構成する一部分を渡しエンコードしてもらうもの
  • URI内で意味を持つ#$&+,/:;=?@もエンコードする
  • encodeURIとの差は#$&+,/:;=?@をエンコードするか否か
  • URI全体をこの関数でエンコードすると、URIとして機能しなくなる

比較ツールつくった

3つの関数によりどのようにエンコードされるかが分かるツールをつくりました。
encoder

HTMLエスケープ用の関数はない

ついでの話。
「HTMLエスケープは基本的にはサーバサイドでするもの」という認識が漠然とあります。が、SPAの登場などもあってクライアントサイドでレンダリングする場面もチラホラあるので、その場合は自前でエスケープ関数を作る必要があります。

function escapeHtml(target) {
  if (typeof target !== 'string') {
    return target;
  }
  return target.replace(/[&'`"<>]/g, (match) => {
    return {
      '&': '&amp;',
      "'": '&#x27;',
      '`': '&#x60;',
      '"': '&quot;',
      '<': '&lt;',
      '>': '&gt;',
    }[match]
  });
}

ざっくりとこんな感じです。

大した話でもないのでまとめとか後書きは抜きにして、現場からは以上です。