HTMLのマークアップ記号のエスケープ

HTMLのマークアップ記号を、エスケープする方法について解説します。

サンプルコード

次の関数ではマークアップの記号を正規表現で検索し、マッチした文字を対応する文字参照 (character reference) の文字列に置換して返します。

function escapeHTML( text )
{
    var replacement = function( ch )
    {
        var characterReference = {
            '"':'"',
            '&':'&',
            '\'':''',
            '<':'&lt;',
            '>':'&gt;'
        };

        return characterReference[ ch ];
    }

    return text.replace( /["&'<>]/g, replacement );
}

匿名関数を使用すれば、この処理は

var escapedText = text.replace(
    /["&'<>]/g,
    function( ch ) { return { '"':'&quot;', '&':'&amp;', '\'':'&#39;', '<':'&lt;', '>':'&gt;' }[ ch ]; }
    );

のようにも書けます。またアロー関数式がサポートされるならば、次のようにも表せます。

var escapedText = text.replace(
    /["&'<>]/g,
    ch => { return { '"':'&quot;', '&':'&amp;', '\'':'&#39;', '<':'&lt;', '>':'&gt;' }[ ch ] }
    );

Prototype.js

ところでPrototype.jsを使用すれば、String.escapeHTML()で同様に処理できます。ただしこのメソッドが対象とするのは、

  • &
  • <
  • >

の3文字だけです。ちなみに逆の変換をするunescapeHTML()もありますが、これも同様の3文字だけを対象としています。

JavaScriptのドキュメントから検索