JavaScript で文字列を文字単位で処理

document.getElementById($ID).innerHTML.split("\n") した直後は 1 行単位の配列になる。
1 行ではなく文字単位で内容をチェック、必要に応じて変換が必要(たとえば、半角スペースを にする等)。
文字列から文字を取り出す、というか一文字単位で何かするには、charAt($Index)を使用すればよい。

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

以下の HTML が

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

以下のような HTML になる。

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