listfulのロゴlistfulのロゴ
JavaScript

JavaScriptでエスケープ/アンエスケープがしたい

エスケープは脆弱性回避のためによく使われます。

アンエスケープは、出力処理の合間などで使われます。

エスケープ

encodeURI

文字列をURIとして使えるようにエスケープします。

encodeURI('https://ダイヤの斧.example/テスト.html?q=検索&p=2');
// https://%E3%83%80%E3%82%A4%E3%83%A4%E3%81%AE%E6%96%A7.example/%E3%83%86%E3%82%B9%E3%83%88.html?q=%E6%A4%9C%E7%B4%A2&p=2

エスケープの対象外となる文字 : A-Z a-z 0-9 : ; , / - _ . @ ? & = + # $ ! ~ * ' ( )

encodeURIComponent

文字列をURIとして使えるようにエスケープします。encodeURIとは違ってスラッシュやコロンまでもエスケープされてしまうので、URLの全体ではなくクエリ文字列(?以降の文字列)に含まれる値用として使いましょう。

エスケープの対象外となる文字 : A-Z a-z 0-9 - _ . ! ~ * ' ( )

encodeURIComponent('検索'); // %E6%A4%9C%E7%B4%A2

URLSearchParams

URLのクエリ文字列をオブジェクト形式で取得するのによく使われるURLSearchParamsですが、URLエスケープにも使えます。

encodeURIやencodeURIComponentは半角スペースを%20に置き換えるのに対し、これは+に置き換えます。

encodeURI('Ha lf'); // Ha%20lf
new URLSearchParams('Ha lf').toString().slice(0, -1); // Ha+lf

HTML文字列のエスケープ

element.innerHTMLやelement.outerHTMLに値を設定する場合には、HTMLにとって意味のある記号をエスケープする必要があります。HTML用のエスケープメソッドはないので、自前で用意する必要があります。

const escapeHTML = function (str) {
  return str
    .replace('<', '&lt;')
    .replace('>', '&gt;')
    .replace('&', '&amp;')
    .replace('"', '&quot;')
    .replace("'", '&#39;');
};
escapeHTML('<p id="output"></p>');
// &amp;lt;p id=&quot;output"&gt;</p>

アンエスケープ

decodeURI

URI形式にエスケープされた文字列をアンエスケープします。encodeURIの逆です。

// ブラウザのアドレスバーには https://ダイヤの斧.example/テスト.html と表示されていますが、
const url = location.href;
element.textContent = url;
// 実際は https://xn--u9jwf9ctgl51y.example/%E3%83%86%E3%82%B9%E3%83%88.html なので、そのように出力されてしまいます。
element.textContent = decodeURI(url);
// https://xn--u9jwf9ctgl51y.example/テスト.html ドメイン名以外はアンエスケープできました。

decodeURIComponent

URIの形式にエスケープされた文字列をアンエスケープします。encodeURIComponentの逆です。

decodeURIComponent('%E6%A4%9C%E7%B4%A2'); // 検索

URLSearchParams

先ほどURLSearchParamsでエンコードができると書きましたが、実はデコードもできちゃいます。

new URLSearchParams('q=' + '%E6%A4%9C%E7%B4%A2').get('q'); // 検索

参考リンク