昨日、公開した WordPress プラグイン “mce_preformatted” は、整形済みテキストを本文に挿入するために、 textarea 内に入力されたテキストの HTML エスケープを行っている。

通常、HTML のエスケープには正規表現を使用するが、このプラグインでは違うアプローチで HTML をエスケープしている。

通常の方法

以下は正規表現を使用した方法。

function htmlEscape(s){
	s=s.replace(/&/g,'&');
	s=s.replace(/>/g,'>');
	s=s.replace(/</g,'&lt;');
	return s;
}

今回使用した方法

obj.innerText （Firefox では obj.textContent）を使用した方法。

function htmlEscape(s){
    var obj = document.createElement('pre');
    if (typeof obj.textContent != 'undefined') {
        obj.textContent = s;
    } else {
        obj.innerText = s;
    }
    return obj.innerHTML;
}

結果は全く同じ。
たいした根拠はないのだが、正規表現よりもエコな気がするんだけど、どうなんだろう？

String 型のメソッドとして登録する

以下のようにすると、さらにエレガントかもしれない。

String.prototype.htmlEscape = function(){
    var obj = document.createElement('pre');
    if (typeof obj.textContent != 'undefined') {
        obj.textContent = this;
    } else {
        obj.innerText = this;
    }
    return obj.innerHTML;
}

こうしておくと、以下のように書けるので、ちょっとだけかっこいい。

var str = '<strong>Cool!</strong>';
alert(str.htmlEscape());