JavaScriptによるソースコード整形表示

JavaScript で文字列を文字単位で処理 - Shammerismの内容にテーブルによる整形部分を追記。

<script type="text/javascript">
var array = document.getElementById("sample-source").innerHTML.split("\n");
var lineLength = array.length;
replaced = "<table border=\"0\">";
for( i = 0 ; i < lineLength ; i++ ){
  replaced = replaced + "<tr><td>" + (i + 1) + "</td>";
  if( i == 0 ) {
    replaced = replaced + "<td rowspan=\"" + lineLength + "\" ";
    replaced = replaced + "style=\"width: 1pm; height: 12px; ";
    replaced = replaced + "background-color:green;\"></td>";
  }
  replaced = replaced + "<td>";
  var charLength = array[i].length;
  for( j = 0 ; j < charLength ; j++ ){
    var c = array[i].charAt(j);
    if( c == ' ' ){
      replaced = replaced + "&nbsp;";
    }
    else if ( c == '<' ){
      replaced = replaced + "&lt;";
    }
    else if ( c == '>' ){
      replaced = replaced + "&gt;";
    }
    else if ( c == ';' ){
      replaced = replaced + "&quot;";
    }
    else {
      replaced = replaced + c;
    }
  }
  replaced = replaced + "</td></tr>";
}
replaced = replaced + "</table>";
document.getElementById("sample-source").innerHTML = replaced;
</script>

ブラウザで HTML ソースを確認すると、以下のようになっている。

<tbody><tr><td>1</td><td rowspan="5" style="width: 1pm; height: 12px; background-color:green;"></td><td>public&nbsp;class&nbsp;HelloWorld&nbsp;{</td></tr><tr><td>2</td><td>&nbsp;&nbsp;&nbsp;&nbsp;public&nbsp;static&nbsp;void&nbsp;main(String[]args)&nbsp;{</td></tr><tr><td>3</td><td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;System.out.println("HelloWorld!\n")"</td></tr><tr><td>4</td><td>&nbsp;&nbsp;&nbsp;&nbsp;}</td></tr><tr><td>5</td><td>}</td></tr></tbody>

特に問題はなさそうだ。tbody は勝手に追加されるのかな。