【jQuery】入力した任意の数値をカンマ区切り、数字桁を入れた形式に変換する方法
この記事の概要
Web制作者
入力した数値にカンマ区切りを入れて表示したい。入力した数値に数字桁を入れて表示したい
管理人
jQueryを利用して、入力数値にカンマ区切りや数字桁を入れることができます。その方法を詳しくお教えしますね。
本記事の内容
- jQueryで入力した数値をカンマ区切り、数字桁ありの形式に変換して表示させる方法
入力フォームなどで、任意の数値を入力して表示形式を変換させるケースがあります。
今回は下記の3パターンを取り扱います。
数値の表示形式変換パターン
-
3桁毎にカンマ区切りを入れて表示する
（例）2500000 ⇒ 2,500,000 -
4桁毎に数字桁を入れて表示する
（例）125475000 ⇒ 1億2547万5000 -
3桁毎にカンマ区切りかつ4桁枚に数字桁を入れて表示する
（例）450027000 ⇒ 4億5,002万7,000
それぞれjQueryを使用した具体的な実装方法を紹介します。
3桁毎にカンマ区切りを入れて表示する
変換したい数値を自由に変えられるようにします（※入力は半角数字）。
動作イメージ
HTML、CSS、JavaScript（jQuery）のソースコードは下記の通りです。
HTML
<div id="input_item">
<input type="number" name="number" id="input_num"/><button id="do_action">変換</button>
</div>
<div class="center">変換後の値</div>
<div id="result_value">
</div>HTML構成
- type属性numberでのinputタグ（任意の数値の入力欄）
- 表示形式の変換ボタン（buttonタグ）
- 変換後の値を表示させるための要素（id:result_value）
CSS
#input_item {
width: 320px;
margin: auto;
}
#input_num {
display: block;
width:100%;
margin: 10px 0;
padding: 10px;
}
#do_action {
display: block;
width:100%;
padding: 10px;
background: #333;
border: none;
color: #fff;
cursor: pointer;
}
.center {
text-align:center;
}CSSは特記事項は無いので、割愛します。
jQuery
$(function(){
$("#do_action").click(function(){
// １．入力された値を取得（先頭に0がある場合は削除する）
var num = $("#input_num").val().replace(/^[0]+/,'');
// ２．string型に変換して三桁ずつに区切る
var result = "";
if(num){
var num = String(num).replace(/(\d)(?=(\d\d\d)+$)/g, "$1,");
result = num;
// ３．カンマ入りの文字列を表示
$("#result_value").html(result);
}
});
});変換ボタン（id:do_action）がクリックされたら、処理を行います。
処理の流れは下記のとおりです。
１．入力された値を取得（先頭に0がある場合は削除する）
.val()でinputタグの値を取得します。その際、.replace()と正規表現により先頭に0が一つ以上連続で並んでいる場合、先頭の0を削除します。
２．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」となるわけです。
３．カンマ入りの文字列を表示
.html()で変換後の値を表示させます。
4桁毎に数字桁を入れて表示する
変換したい数値を自由に変えられるようにしています（※入力は半角数字）。
動作イメージ
数値を変換すると、4桁ごとに万・億・兆・京と数字桁が入るようになっています。
HTML/CSS
html、CSSともに「3桁毎にカンマ区切りを入れて表示する」の時と同じです。
jQuery
$(function(){
$("#do_action").click(function(){
// １．入力された値を取得（先頭に0がある場合は削除する）
var num = $("#input_num").val().replace(/^[0]+/,'');
// ２．数字の桁を配列で定義
var digit = ['', '万', '億', '兆', '京'];
// ３．string型に変換して4桁ずつ区切る
var result = '';
if(num){
var nums = String(num).replace(/(\d)(?=(\d\d\d\d)+$)/g, "$1,").split(",").reverse();
// ４．先頭に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;
}
}
// ５．数字の桁入りの文字列を表示
$("#result_value").html(result);
}
});
});１．入力された値を取得（先頭に0がある場合は削除する）
.val()でinputタグの値を取得します。「3桁毎にカンマ区切りを入れて表示する」の時と同様に先頭に0が1つ以上並んでいる場合削除します。
２．数字の桁を配列で定義
4桁ごとに表示する数字の桁（万・億・兆・京）を配列で定義します。
３．string型に変換して4桁ずつ区切る
取得した数値をString型に変換して、正規表現により数字4桁にカンマが入るようにします。
さらに、.split(",")で数字4桁ごとに配列にして、.reverse()で配列を逆に並び変えます。
※カンマ区切りを入れる仕組みは「3桁毎にカンマ区切りを入れて表示する」時の「（例）1234567の場合」を参照。
（例）「702195500」という数値の場合
正規表現を使って数字4桁ごとにカンマを入れます。
7,0219,5500
.split(",")で数字4桁ごと（カンマ区切りごと）に配列にします。
[“7”, “0219”, “5500”]
.reverse()で配列の順番を逆に並び変えます。
[“5500”, “0219”, “7”]
４．先頭に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"となります。
５．数字の桁入りの文字列を表示
.html()で変換後の値（数字の桁入り）を表示させます。
3桁毎にカンマ区切りかつ4桁枚に数字桁を入れて表示する
変換したい数値を自由に変えられるようにしています（※入力は半角数字）。
動作イメージ
数値を変換すると、4桁毎に万・億・兆・京の数字桁、3桁毎にカンマ区切りが入ります。
HTML/CSS
html、CSSともに「3桁毎にカンマ区切りを入れて表示する」の時と同じです。
jQuery
$(function(){
$("#do_action").click(function(){
// １．入力された値を取得（先頭に0がある場合は削除する）
var num = $("#input_num").val().replace(/^[0]+/,'');
// ２．数字の桁を配列で定義
var digit = ['', '万', '億', '兆', '京'];
var result = '';
if(num){
// ３．string型に変換して四桁ずつ区切る
var nums = String(num).replace(/(\d)(?=(\d\d\d\d)+$)/g, "$1,").split(",").reverse();
// ４．先頭に0がある場合は削除して、数字の単位を付け加える
for(var i=0;i<nums.length;i++){
if(!nums[i].match(/^[0]+$/)){
// ５．頭の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;
}
}
// ６．カンマ区切り、数字桁入りの文字列を表示
$("#result_value").html(result);
}
});
});１．入力された値を取得（先頭に0がある場合は削除する）
.val()でinputタグの値を取得します。「3桁毎にカンマ区切りを入れて表示する」の時と同様に先頭に0が1つ以上並んでいる場合削除します。
２．数字の桁を配列で定義
4桁ごとに表示する数字の桁（万・億・兆・京）を配列で定義します。
３．string型に変換して四桁ずつ区切る
「4桁毎に数字桁を入れて表示する」と同様の処理をします。
４．先頭に0がある場合は削除して、数字の単位を付け加える
「4桁毎に数字桁を入れて表示する」と同様の処理をします。
５．頭の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"となります。
６．カンマ区切り、数字桁入りの文字列を表示
.html()で変換後の値を表示させます。
まとめ
今回の動作の実装ポイントをおさえておきましょう。
実装ポイント
- 先頭の0を削除すること
- 正規表現でマッチングすること
特に正規表現で正しくマッチングが行えるかどうかがネックになります。
今回は、ボタンをクリックして値を変換するという形をとりましたが、.bind()でkeyup/keydownイベントを設定してリアルタイムで数値を変換して表示させることも可能です。