HTMLのインデント、連続する半角スペース、改行を取り除くJavaScript

javascript html

改行がスペースになったり、連続したスペースは１文字扱いだったりとややこしいレンダリング周り。さらに、ブラウザ間で差があるから発狂物。どのブラウザで見ても同じにしたい。スペース１つが命取りな場合もある。なんとかしたい！


そんなことは、サーバ側でやれよ。って話ですが、UserScriptでゴニョゴニョしたいときはjavascriptでがんばるしかないので、なんとかしてみました。

JavaScript版

var b = document.body;
// body.innerHTMLを１行ごと配列に格納
var l = b.innerHTML.split("\n");

for (var i = 0, j = l.length; i < j; i++) {
  // 前後の空白文字を取り除く
  // 連続する半角スペースを１つにまとめる
  l[i] = l[i].replace(/^\s+|\s+$/g,'').replace(/ +/g,' ');
}

// 改行を削除してbody.innerHTML書き換える
b.innerHTML=l.join('');

Bookmarklet版

どのブラウザでもいける
javascript:(function(){var b=document.body,l=b.innerHTML.split("\n");for(var i=0,j=l.length;i<j;i++)l[i]=l[i].replace(/^\s+|\s+$/g,'').replace(/ +/g,' ');b.innerHTML=l.join('');})()
JavaScript 1.6をサポートしているブラウザ（IE以外）
javascript:(function(){var b=document.body,l=b.innerHTML.split("\n");l.forEach(function(m,i){l[i]=m.replace(/^\s+|\s+$/g,'').replace(/ +/g,' ')});b.innerHTML=l.join('');})()
JavaScript 1.8.1をサポートしているブラウザ（Firefox3.5）
javascript:(function(){var b=document.body,l=b.innerHTML.split("\n");l.forEach(function(m,i){l[i]=m.trim().replace(/ +/g,' ')});b.innerHTML=l.join('');})()

今後の課題

<html>
  <body>
    <ul>
      <li><span>    aiu   eo    </span>
      <li><a href="hoge.html">あいう</a> (2008/08/28更新)          </li>
    </ul>
  </body>
<html>


を

<html>
  <body>
<ul><li><span> aiu eo </span><li><a href="hoge.html">あいう</a> (2008/08/28更新) </li></ul>
  </body>
<html>


までは、整形できたのですが、まだブラウザで差が出る。具体的には、「(2008/08/28更新) 」赤くなっている部分をIEではスペースありとみなす。