JavaScript 特殊文字を文字参照に変換する

JavaScriptの文字列中の特殊文字を文字参照に変換する。

–JavaScript Good parts P38 ここから–
JavaScriptでは、標準で用意されている変数型を拡張することができる。
Function.prototypeを拡張することで、すべての関数で利用できるメソッドを追加することができる。Function.prototypeにmethodメソッドを追加することで、prototypeプロパティを直接指定することなく、prototypeオブジェクトにメソッドを追加できるようになる。
–JavaScript Good parts P38 ここまで–

Function.prototype.method = function(name, func) {
    if (!this.prototype[name]) {
        this.prototype[name] = func;
        return this;
    }
};
//下記をString.method(コード1)とする
String.method('entityify', function() {
    var character = {
        '<': '&lt;',
        '>': '&gt;',
        '&': '&amp;',
        '"': '&quot;'
    };
    return function() {
        return this.replace(/[<>&"]/g, function(c) {
            return character[c];
        });
    };
}());

console.log("<".entityify());
console.log(">".entityify());
console.log("&".entityify());
console.log("\"".entityify());

/*
&lt;
&gt;
&amp;
&quot;
*/

ここのString.method(コード1)だが、returnを3回使っている。これはなぜか？下記のString.method(コード2)でも正常に動く。コード1だと、characterオブジェクトはentityifyメソッド定義時に1回だけ作られて、メソッドを何回呼び出しても定義時に生成したcharacterオブジェクトを使用する。
コード2だと、entityifyメソッドを呼び出すたび毎に、characterオブジェクトが生成される。

//下記をString.method(コード2)とする
String.method('entityify', function() {
    var character = {
        '<': '&lt;',
        '>': '&gt;',
        '&': '&amp;',
        '"': '&quot;'
    };
    return this.replace(/[<>&"]/g, function(c) {
        return character[c];
    });
});

Function.prototype.methodを使用しない場合は次のようになる。

String.prototype.entityify = function() {
    var character = {
        '<': '&lt;',
        '>': '&gt;',
        '&': '&amp;',
        '"': '&quot;'
    };
    return function() {
        return this.replace(/[<>&"]/g, function(c) {
            return character[c];
        });
    };
}();

console.log("<".entityify());
console.log(">".entityify());
console.log("&".entityify());
console.log("\"".entityify());

Function.prototypeを拡張すると不具合が出る可能性があるため、私はentityify関数をいつも使っている。追加で\nを\n<br>に変換も入れておくと次のようになる。

var entityify = (function() {
    const character = {
        '<': '&lt;',
        '>': '&gt;',
        '&': '&amp;',
        '"': '&quot;',
        '\n': '<br>'
    };
    return function(t2) {
        return t2.replace(/[<>&"\n]/g, function(c) {
            return character[c];
        });
    };
})();

console.log(entityify("<"));
console.log(entityify(">"));
console.log(entityify("&"));
console.log(entityify("\""));
console.log(entityify("\n"));

/*
&lt;
&gt;
&amp;
&quot;
<br>
*/

参考
JavaScript：the　good　parts 「良いパーツ」によるベストプラクティス [ ダグラス・クロフォード ]のP38,104

• 
• Tweet

• JavaScript