入力数値をカンマ区切りにする

やりたいこと

金額などのカンマをフォーカスが失われた時に入れたい
フォーカスを受けたときはカンマを無くしたい

今回使ったAPI

focus(fn)

フォーカスを受け取ったタイミングで発生する。

blur(fn)

フォーカスを失ったタイミングで発生する。

val()

全ての要素のvalue属性を返す。

replace(regexp|substr, newSubStr|function[, flags])

第一引数に検索する文字を指定し、第二引数に置換後の文字を指定します。

正規表現

半角数字1文字

gオプション

マッチしたすべてを置換する

肯定先読み

(?=部分パターン)

部分パターンがマッチすると真になる。
肯定先読みは、patternの直前の位置にマッチする。

否定先読み

(?!部分パターン)

部分パターンがマッチしないと真になる。

ex)
123456789という数字に対する正規表現の置換を
分解して考えてみる。

/(\d)(?=(\d{3})+(?!\d))/g, '$1,'

「\d」で「1」にマッチする。
「?=」で肯定先読み。
1. 「\d{3}」で「234」にマッチする。
2. 「?!\d」で「5」にマッチしてしまうので偽になる。
1.2.を繰り返していき「\d」で「6」にマッチする。
「?=」で肯定先読み。
1. 「\d{3}」で「789」にマッチする。
2. 「?!\d」で空白で数字ではないのでマッチしないで真になる。
肯定先読みは直前にマッチするので、「6」と「789」の直前にマッチする。
「$1,」により文字列が「123456,789」に置換される。
gオプションにより、上記処理が繰り返される。
1. カンマが入ったので、否定先読みは次にカンマで真になる。

ソース

.html

<p>金額:<input type="text" id="text1" value="">円</p>

.js

$(function(){
    $("#text1").focus(function() {
        $(this).val($(this).val().replace( /,/g, '' ));
    }).blur(function() {
        $(this).val($(this).val().replace( /(\d)(?=(\d{3})+(?!\d))/g, '$1,' ));
    });
});

cluchのブログ

業務で使ったり、学んでいる知識を忘れないために覚書として使っていく予定。