JavaScript おれおれ Advent Calendar 2011 – 21日目

文字列を置換するやつあるじゃないですか。 .replace()ってやつ。あれ、第1匹数も第2引数も普通の文字列を渡したりしますけど、第1匹数には正規表現を渡す事ができるんですよ。あと第2引数には関数を渡す事だってできるんです。

アンダースコアで連結された名前をキャメルケースに置換

var result = "hoge_fuga_123".replace(
  /_./g,
  function(matched, /* m1, m2, ..., */ offset, original) {
    return matched.charAt(1).toUpperCase();
  });

console.log(result);  // => "hogeFuga123"

matchedはマッチした文字列、offsetはその位置、originalは元の文字列です。関数が何度呼ばれてもoriginalは元のままです。（途中まで置換済み、のようにはなりません。）

正規表現で括弧()を使ってキャプチャした場合は、matchedの次の引数に順次挿入されます。正規表現ではなく文字列で検索した場合は、もちろん0個です。

キャプチャした数により引数の数も変わるので、offsetとoriginalStringを使う場合はarguments[arguments.length-1]みたいにした方が安全です。まああんまり使う場面ないと思いますけど。

URLをリンクか画像にする

function replaceUrl(text) {
  return text.replace(/http:\/\/[a-z./]+/g, function(url) {
    // 拡張子が.gif, .jpg, .pngであれば画像に
    var extension = url.match(/\.\w+$/);
    if (extension && (extension[0] == ".gif" || extension[0] == ".jpg" || extension[0] == ".png")) {
      return '<img src="' + url + '">';
    }
    // 画像っぽいURLでなければリンクに
    else {
      return '<a href="' + url + '">' + url + '</a>';
    }
  });
}

console.log(replaceUrl('続きはhttp://www.example.com/で！'));
console.log(replaceUrl('この猫かわいいー http://www.example.net/cat.jpg'));

続きは<a href="http://www.example.com/">http://www.example.com/</a>で！
この猫かわいいー <img src="http://www.example.net/cat.jpg">

(‘-`) oO( ええと正規表現が甘いのは許して下さい、今日はそこじゃないんで……。 )

(‘-`) oO( あと、本当に画像URLをimg要素に置換しちゃうのは使い勝手良くないと思います……。 )