JavaScript

JavaScriptの関数を文字列化する方法(改行・タグを含む)

はじめに

今回の目的は「HTMLにJavaScriptの関数を文字列として出力させる」ことです。

方法

文字列化

JavaScriptの関数はObjectクラスであるため、toString関数が利用できます。
(JavaScriptに本質的にクラスが存在するかという話は別問題ですので気にしないでください。)

// 足し算をする関数
function mySum(a, b) {
    var result = a + b;
    return result;
}

// 関数の文字列化
var str = mySum.toString();

しかし、この状態でinnerHTMLやdocument.writeを用いてHTMLに出力すると、下のようにタブ文字や改行文字が無視されて出力されてしまいます。

function mySum(a, b) { var result = a + b; return result; }

タブ文字・改行コードの置換

string型には置換関数replaceが存在しますので、こちらを利用して変換します。

// 改行コードを<br>に変換
str.replace(/\r?\n/g, "<br>");

// タブ文字を半角スペース(&nbsp;)4つに変換
str.replace(/\t/g, "&nbsp;&nbsp;&nbsp;&nbsp;");

これによって以下のように出力されます。完璧ですね。

function mySum(a, b) {
    var result = a + b;
    return result;
}

※エディタによってはタブ文字が半角スペースで表現されていることもあります。その場合は下のコードをご利用ください。

// 改行コードを<br>に変換
str.replace(/\r?\n/g, "<br>");

// 半角スペースコードを半角スペースに変換
str.replace(/\s/g, "&nbsp;");

コード全体

せっかくJavaScriptはオブジェクト指向なので、以下のようにまとめて書いてしまいましょう。

var str = mySum.toString().replace(/\r?\n/g, "<br>").replace(/\s/g, "&nbsp;");