PHPプログラマーの松永です。
今回は、jQueryを使用し、数値へのカンマ付与する方法をご紹介します。
金額の表示や、データ数値の表示などに使用し、数値をより見やすくすることができます。
目次
前提
今回はjsfiddleを使用し、サンプルを作成しています。
簡易的に作成していますので、Pタグなど使用し改行を行っています。
業務ではしっかりとCSSでレイアウトの調整を行っていただければと思います。
テキストを入力した際のエラー処理はありません。
適宜追加していただければと思います。
HTML
HTMLはとてもシンプルで、
- 数値を入力するインプット
のみです。
<p>数値を入力してください。</p>
<input type="text" id="js-numericValue" class="numeric-value" value="" />
jQuery
jQueryのバージョンは3.3.1を使用しています。
大きく、
- フォーカス
- フォーカスアウト
- カンマの追加
- カンマの削除
の４つの機能でカンマの付与を実現しています。
$(function() {
var priceCommaData = '';
var priceNonCommaData = '';
/**
* フォーカス
*/
$('#js-numericValue').on('focus', function() {
priceCommaData = $(this).val(); // 入力値取得
priceNonCommaData = removeComma(priceCommaData); // カンマ削除
$(this).val(priceNonCommaData); // 反映
});
/**
* フォーカスアウト
*/
$('#js-numericValue').on('blur', function() {
priceNonCommaData = $(this).val(); // 入力値取得
priceCommaData = addComma(priceNonCommaData); // カンマ付与
$(this).val(priceCommaData); // 反映
});
/**
* カンマの追加
*/
function addComma(priceNonCommaData) {
var priceCommaData = '';
/**
* 正規表現
* \d => 半角数字
* \d{3} => 3桁の半角数字
* ?=(\d{3}) => \dの後ろに\d{3}がある
* +(?!\d) => \d{3}の後ろに\dがない
* g => マッチしたべての部分文字列を置換
* $1 => 変数
* => カッコ()で囲われた部分を$1に代入
*
* 1234の場合の$1 => 1
* 1234の場合の$2 => 234
* https://regexr.com/
*/
priceCommaData = priceNonCommaData.replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,');
// 小数点以下のカンマを削除
if (priceCommaData.search(/\./) !== -1) { // 小数点が含まれている場合
priceCommaData = removeFloatComma(priceCommaData);
}
return priceCommaData;
}
/**
* カンマの削除
*/
function removeComma(priceCommaData) {
var priceNonCommaData = '';
priceNonCommaData = priceCommaData.replace(/,/g, ''); // 入力時のカンマを削除
return priceNonCommaData;
}
/**
* 小数点以下のカンマの削除
*/
function removeFloatComma(priceCommaData) {
var priceDotBefore = '';
var priceDotAfter = '';
// 小数点までを取得
priceDotBefore = priceCommaData.match(/(.*)\./);
priceDotBefore = priceDotBefore[0];
priceDotBefore = priceDotBefore.replace(/\./g, '')
// 小数点以降を取得
priceDotAfter = priceCommaData.match(/\.(.*)/);
priceDotAfter = priceDotAfter[0];
priceDotAfter = priceDotAfter.replace(/\,/g, '');
// 小数点前と小数点後を結合
priceCommaData = priceDotBefore + priceDotAfter;
return priceCommaData;
}
});
CSS
今回は抵抗なく見えるようにしているCSSを記述しているのみとなっています。
.numeric-value {
font: 20px sans-serif;
padding: 12px;
border: 1px solid #000000;
border-radius: 3px;
}
jsfiddle
実際の動作をjsfiddleで確認できますので、是非動作させてみてください。
以上でございます。
まとめ
カンマの付与は、金額、データなど以外と多くの場面で必要となりますよね。
カンマを付与する条件が変更になることはないと思いますので、一度正常に動作する機能を作るとその後ずっと使いまわせるので便利です。
今回のサンプルをきっかけに自分オジリナルのカンマ付与機能を作成してみてはいかがでしょうか。