半角英数字の前後に半角空白を入れる

id:dropdb さんのつぶやきより。

関係ないけど自動的に、半角英数字の前後には半角空白を入れるようにしたい。

正規表現でごにょごにょドーンすればいいのかな。

同じくいつも手動でスペースを入れているなぁ。 面白そうなので作ってみた。

insertSpace(document.body)

とすると、再帰的に子ノードをたどって、テキストノードを見つけたら半角英数字の前後にスペースを入れてる。 ループの方法は、jQuery の text() メソッドのソース を参考にした。

function insertSpace(element) {
  // [!-~]は記号と英数字 (ASCIIコード0x21~0x7e)
  var re1 = /([^!-~\s])([!-~])/g;
  var re2 = /([!-~])([^!-~\s])/g;
  for(var i = 0, length = element.childNodes.length; i < length; i++) {
    var childNode = element.childNodes[i];
    switch(childNode.nodeType) {
    case 1: // ELEMENT_NODE
      insertSpace(childNode);
      break;
    case 3: // TEXT_NODE
      childNode.nodeValue = 
        childNode.nodeValue.replace(re1, "$1 $2");
      childNode.nodeValue = 
        childNode.nodeValue.replace(re2, "$1 $2");
      break;
    }
  }
}

関係ないけど、 Mac だとバックスラッシュを

alt + \

で入力しないとダメなんだね。 ずっと \s がスペースにマッチせずに悩んでたよ。

追記

トラックバックを送ってから気がついたけど、すでに解決済みだったのね。

replace(/([\x21-\x7E]+)/g,"%20$1%20")

[ ] の内側でも16進で指定できるんだ。なるほど。 これだと半角英数から始まる行の先頭に空白が入っちゃうけど、はてな記法だと問題ないのかな？ tDiary の Wiki 記法だと pre に変換されちゃう。