JavaScriptでソースコードに行番号付与

以下の記事で

• JavaScriptで任意のHTML要素を取得する - Shammerism
• JavaScriptでHTML要素の改行を置換する - Shammerism
• JavaScriptでHTML要素を置換する - Shammerism

JavaScript を使用して特定TAGの HTML を置換する方法がわかった。
これらの次のステップで、ソースコードに行番号を付与する。

<script type="text/javascript">
var array = document.getElementById("sample-source").innerHTML.split("\n");
lineLength = array.length;
replaced = "";
for( i = 0 ; i < lineLength ; i++ ){
  replaced = replaced + (i + 1) + ":" + array[i] + "<br/>";
}
document.getElementById("sample-source").innerHTML = replaced;
</script>

サンプルの HTML は以下だが、

<div id="sample-source">public class Test {
    public static void main(String[]args) {
        System.out.println("HelloWorld!\n");
    }</div>

ブラウザで表示させたときの HTML は以下。

1:public class Test {
<br>2:    public static void main(String[]args) {
<br>3:        System.out.println("HelloWorld!\n");
<br>4:    }

このステップもクリアだ。