HTML特殊文字をエスケープ/アンエスケープする方法 | JavaScript / jQuery

HTMLを扱う上で、特殊文字を表示する必要がある場合があります。

しかし、そのまま表示すると文字化けや表示が崩れることがあるため、特殊文字をエスケープ/アンエスケープする必要があります。

今回は、JavaScriptを使用してHTML特殊文字をエスケープ/アンエスケープする方法について紹介します。

HTML特殊文字

エスケープおよびアンエスケープが必要なHTML特殊文字とエスケープ結果の一覧は以下です。

HTML特殊文字	エスケープ結果
&	&
<	&lt;
>	&gt;
“	&quot;
‘	&x27;
`	&x60;

HTML特殊文字をエスケープ/アンエスケープする方法

JavaScriptにはPHPのようなHTML特殊文字をエスケープおよびアンエスケープする関数は用意されていません。

よって、愚直に以下のように変換します。

function encodeHTMLSpecialWord(str) {
    return str
        .replace(/&/g, "&")
        .replace(/</g, "&lt;")
        .replace(/>/g, "&gt;")
        .replace(/\"/g, "&quot;")
        .replace(/\'/g, "&#x27;")
        .replace(/`/g, "&#x60");
};

function decodeHTMLSpecialWord(str) {
    return str
    .replace(/&amp;/g, "&")
    .replace(/&lt;/g, "<")
    .replace(/&gt;/g, ">")
    .replace(/&quot;/g, '"')
    .replace(/&#x27;/g, "'")
    .replace(/&#x60/g, "`");
};

まとめ

JavaScriptにおいてHTML特殊文字をエスケープ/アンエスケープする方法を紹介しました。