×

jQueryを使用して任意の数値を3桁毎にカンマ区切り、4桁毎に数字桁(万・億・兆)を入れた状態に変換する方法

2016年12月18日 コーディング

数値

Webページ上で任意の数値に対して表示形式を変換したいケースがあります。

  • 1.3桁毎にカンマ区切りを入れて表示する
    (例)2500000 ⇒ 2,500,000
  • 2.4桁毎に数字桁を入れて表示する
    (例)125475000 ⇒ 1億2547万5000
  • 3.3桁毎にカンマ区切りかつ4桁枚に数字桁を入れて表示する
    (例)450027000 ⇒ 4億5,002万7,000

当記事では上記3つの表示形式を取り扱います。

jQueryを使用して、任意の数値を上記3つの形式に変換する方法を紹介します。

3桁毎にカンマ区切りを入れて表示する

下記DEMO1をクリックして、動作を確認してください。変換したい数値を自由に変えられるようにしています。
(※半角数字で入力してください。)

DEMO1

html・CSSコーディング

変換後の値

主に下記3つで構成しています。

  • type属性numberでのinputタグ(任意の数値の入力欄)
  • 表示形式の変換ボタン(buttonタグ)
  • 変換後の値を表示させるための要素(id:result_value)

CSSについては特記事項は無いので、割愛します。

jQueryで数値にカンマ区切りをつける

$(function(){
	$("#do_action").click(function(){
		// 1.入力された値を取得(先頭に0がある場合は削除する)
		var num = $("#input_num").val().replace(/^[0]+/,'');
		// 2.string型に変換して三桁ずつに区切る
		var result = "";
		if(num){
			var num = String(num).replace(/(\d)(?=(\d\d\d)+$)/g, "$1,");
			result = num;
			// 3.カンマ入りの文字列を表示
			$("#result_value").html(result);
		}
	});
});

変換ボタン(id:do_action)がクリックされたら、処理を行います。

処理の流れは下記のとおりです。

1.入力された値を取得(先頭に0がある場合は削除する)
.val()でinputタグの値を取得します。
その際、.replace()と正規表現により先頭に0が一つ以上連続で並んでいる場合、先頭の0を削除します。

2.string型に変換して三桁ずつに区切る
取得した数値をString型に変換して、正規表現により数字3桁毎にカンマが入るようにします。

(\d)(?=(\d\d\d))で半角数字の後ろに3つ連続で半角数字がある場合にマッチします(肯定先読みという方法)。
それに+$を加えて行末からマッチングしていきます。

マッチング成功した文字列にカンマをつけたもので置換します。

(例)1234567の場合
行末からマッチングをします。
最初は7で、「7」の後ろに数字が3つ並んでいないのでマッチしません。6→5→4と続き、「4」のとき後ろに「567」と数字が3つ並んでいるので、ここで初めてマッチします。
この「4」を「4,」と置換します。ここまでで、「1234,567」という文字列になります。

引き続き3を見ると3の後ろの3文字を見ると「4,6」となり、カンマが入っているのでマッチしません。2→1と見ていくと、「1」の時後ろに「234」と数字が3つ並んでいるので、この「1」を「1,」と置換します。

最終的に「1234567」の場合、「1,234,567」となるわけです。

3.カンマ入りの文字列を表示
.html()で変換後の値を表示させます。

4桁毎に数字桁を入れて表示する

下記DEMO2をクリックして、動作を確認してください。変換したい数値を自由に変えられるようにしています。
(※半角数字で入力してください。)

数値を変換すると、4桁ごとに万・億・兆・京と数字桁が入るようになっています。

DEMO2

html・CSSコーディング

html、CSSともに「3桁毎にカンマ区切りを入れて表示する」の時と同じです。

jQueryで数値に数字桁を付ける

$(function(){
	$("#do_action").click(function(){
		// 1.入力された値を取得(先頭に0がある場合は削除する)
		var num = $("#input_num").val().replace(/^[0]+/,'');
		// 2.数字の桁を配列で定義
		var digit = ['', '万', '億', '兆', '京'];
		// 3.string型に変換して4桁ずつ区切る
		var result = '';
		if(num){
			var nums = String(num).replace(/(\d)(?=(\d\d\d\d)+$)/g, "$1,").split(",").reverse();
			// 4.先頭に0がある場合は削除して、数字の単位を付け加える(4桁すべて0の場合は何もしない)
			for(var i=0;i < nums.length;i++){
				if(!nums[i].match(/^[0]+$/)){
					// 頭の0を削除
					nums[i] = nums[i].replace(/^[0]+/g, "");
					result = nums[i] + digit[i] + result;
				}
			}
			// 5.数字の桁入りの文字列を表示
			$("#result_value").html(result);
		}
	});
});

1.入力された値を取得(先頭に0がある場合は削除する)
.val()でinputタグの値を取得します。「3桁毎にカンマ区切りを入れて表示する」の時と同様に先頭に0が1つ以上並んでいる場合削除します。

2.数字の桁を配列で定義
4桁ごとに表示する数字の桁(万・億・兆・京)を配列で定義します。

3.string型に変換して4桁ずつ区切る
取得した数値をString型に変換して、正規表現により数字4桁にカンマが入るようにします。

さらに、.split(",")で数字4桁ごとに配列にして、.reverse()で配列を逆に並び変えます。

※カンマ区切りを入れる仕組みは「3桁毎にカンマ区切りを入れて表示する」時の「(例)1234567の場合」を参照。

(例)「702195500」という数値の場合

正規表現を使って数字4桁ごとにカンマを入れます。
7,0219,5500

.split(",")で数字4桁ごと(カンマ区切りごと)に配列にします。
["7", "0219", "5500"]

.reverse()で配列の順番を逆に並び変えます。
["5500", "0219", "7"]

4.先頭に0がある場合は削除して、数字の単位を付け加える(4桁すべて0の場合は何もしない)
上記の例の続きですが、for文で["5500", "0219", "7"]の配列を先頭から順に処理していきます。

nums[i]:先頭の0を除いた状態の数字
digit[i]:i番目の桁文字

4桁ずつ桁文字を付ける処理を行い、文字列連結を行います。

まずは先頭の「5500」は「0000」と不一致、先頭に0なし、digit[0]は空文字なので、result="5000"となります。

次に「0219」は「0000」と不一致ですが、先頭に0があるので0を削除します。digit[1]は「万」なので、result="219万5000"となります。

最後に「7」は「0000」と不一致、先頭に0なしdigit[2]は「億」なのでresult="7億219万5000"となります。

5.数字の桁入りの文字列を表示
.html()で変換後の値(数字の桁入り)を表示させます。

3桁毎にカンマ区切りかつ4桁枚に数字桁を入れて表示する

下記DEMO3をクリックして、動作を確認してください。変換したい数値を自由に変えられるようにしています。
(※半角数字で入力してください。)

数値を変換すると、4桁毎に万・億・兆・京の数字桁、3桁毎にカンマ区切りが入ります。

DEMO3

html・CSSコーディング

html、CSSともに「3桁毎にカンマ区切りを入れて表示する」の時と同じです。

jQueryで数値にカンマ区切りと数字桁を付ける

$(function(){
	$("#do_action").click(function(){
		// 1.入力された値を取得(先頭に0がある場合は削除する)
		var num = $("#input_num").val().replace(/^[0]+/,'');
		// 2.数字の桁を配列で定義
		var digit = ['', '万', '億', '兆', '京'];
		var result = '';
		if(num){
			// 3.string型に変換して四桁ずつ区切る
			var nums = String(num).replace(/(\d)(?=(\d\d\d\d)+$)/g, "$1,").split(",").reverse();
			// 4.先頭に0がある場合は削除して、数字の単位を付け加える
			for(var i=0;i < nums.length;i++){
				if(!nums[i].match(/^[0]+$/)){
					// 5.頭の0を削除し、先頭が0以外かつ4桁のときに数値に区切りを入れる
					nums[i] = nums[i].replace(/^[0]+/g, "");
					if(nums[i].length == 4){
						nums[i] = nums[i].replace( /(\d)(?=(\d\d\d)+/g, '$1,' );
					}
					result = nums[i] + digit[i] + result;
				}
			}
			// 6.カンマ区切り、数字桁入りの文字列を表示
			$("#result_value").html(result);
		}
	});
});

1.入力された値を取得(先頭に0がある場合は削除する)
.val()でinputタグの値を取得します。「3桁毎にカンマ区切りを入れて表示する」の時と同様に先頭に0が1つ以上並んでいる場合削除します。

2.数字の桁を配列で定義
4桁ごとに表示する数字の桁(万・億・兆・京)を配列で定義します。

3.string型に変換して四桁ずつ区切る
「4桁毎に数字桁を入れて表示する」と同様の処理をします。

4.先頭に0がある場合は削除して、数字の単位を付け加える
「4桁毎に数字桁を入れて表示する」と同様の処理をします。

5.頭の0を削除し、先頭が0以外かつ4桁のときに数値に区切りを入れる
「4桁毎に数字桁を入れて表示する」の時の例(「702195500」という数値の場合)で考えると、.reverse()でnums=["5500", "0219", "7"]にするまでは同じです。

ここからさらにカンマ区切りを入れて文字列連結を行います。

「5500」の先頭に0なしかつ、4桁なので、正規表現と.replace()を使って「5,500」というカンマ区切り入りの文字列にします。配列の先頭なのでdigit[0]が空文字、よってresult="5,000"となります。

「0219」は先頭に0があるので0を削除します。すると「219」という3桁の数字になるので、カンマは入りません。digit[1]は「万」なので、result="219万5,000"となります。

「7」は先頭に0なしで1桁の数字なのでカンマなしでdigit[2]は「億」なのでresult="7億219万5,000"となります。

6.カンマ区切り、数字桁入りの文字列を表示
.html()で変換後の値を表示させます。

まとめ

カンマ区切り、数字桁を入れるにあたり、どちらもポイントとなるのは、「先頭の0を削除すること」、「正規表現でマッチングすること」です。

特に正規表現で正しくマッチングが行えるかどうかがネックになります。

今回は、ボタンをクリックして値を変換するという形をとりましたが、.bind()でkeyup/keydownイベントを設定してリアルタイムで数値を変換して表示させることも可能なので、余裕があればその記事も書こうかなと思います。

関連記事