2012年5月10日木曜日

正規表現を使って簡単置換 with Visual Studio

jquery.tmplを使って帳票っぽい画面を作っていたら、直接値を表示するのではなく関数を呼び出して値を変更してから表示したくなったんだけど、項目がたくさんあって一個一個手で変更していくのは骨だなぁ、ってことでVisual Studioと正規表現で簡単に置換できる方法を調べたのでその紹介。

下記のようなjquery.tmplを使用しているコードがあるとする。

${prop1}
${prop2}
${prop3}

このprop1~3を下記のようにしたいとする。

${callMethod(prop1)}
${callMethod(prop2)}
${callMethod(prop3)}

数が少なければ手でしゃしゃっと修正してしまうのもありだけれども、大量の項目をこのように置換したい場合はVisual Studioの置換機能と正規表現を使用すれば簡単に変更できる。

Ctrl + h で検索と置換ウィンドウを開いて、検索する文字列に\$\{{.*}\}、置換後の文字列に${callMethod(\1)}と入力する。条件チェックボックスにチェックして正規表現を選択するのを忘れないように。


これで置換ボタンを押下すると予期したように置換されているのが確認できると思う。
簡単に解説すると、検索する文字列で指定した{.*}の部分でprop1~3のマッチングを行っている。そのマッチングした部分を置換後の文字列で指定した\1で使用している。マッチングの部分が複数ある場合は\2, \3のようにすることで対応できる。

ちなみにJavascriptだとマッチングの部分が{}ではなく()だし、\1の部分が$1となっていて、ここらへんは言語によって微妙に異なっているので他の用途で使用する場合は言語仕様をよく確認してほしい。

ASP.NETでDateTimeをJSONに変換したら不思議な文字列になった場合の対処法

ASP.NETでJavaScriptSerializerを使用してDateTimeをJSONに変換すると下記のような嬉しくない形で出力される。

/Date(1329058800000)/

JSONに変換する前にToString("yyyy/MM/dd")でもして文字列にしてしまえば問題ないけれど、毎回そういうことが可能なわけでもないのでJavaScriptでの対処方法を紹介する。
var date = "/Date(1329058800000)/";
alert(convertToDateTime(date));

function convertToDateTime(value) {
    var date = new Date(parseInt(value.replace("/Date(", "").replace(")/", ""), 10));
    return date.getFullYear() + '/' + fillZero(date.getMonth() + 1, 2) + '/' + fillZero(date.getDate(), 2);
}
function fillZero(number, width) {
    width -= number.toString().length;
    if (width > 0) {
        return new Array(width + (/\./.test(number) ? 2 : 1)).join('0') + number;
    }
    return number;
}
上記のコードを実行すると2012/02/13と表示されるのが確認できる。