フォームに入力した時に通貨に自動で区切り文字を行う

1000000
↓
1,000,000

 

jQuery

function addCommas(x) {
    return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}

• x.toString()
  正規表現使うのでString型に変換しているよ！🐱

 

$("input:text[numberOnly]").on("keyup", function() {
    $(this).val(addCommas($(this).val().replace(/[^0-9]/g,"")));
});

• input type=text かつ numberOnlyの値があるフォームにて、キーが入力された時をトリガー
• addCommas()を行う前に、既存のフォームに入力された値のカンマを空にしている。

.replace(/[^0-9]/g, “”)

「0〜9に含まれない文字」を空に置換する

HTML

<input type="text" name="budget" class="form-control" value="" id="form-budget" numberOnly required>

 

正規表現お勉強タイム

 

コピペエンジニアにならない為の解説だよ🐱✨

JavaScript正規表現

 

replace(/\B(?=(\d{3})+(?!\d))/g, “,”)

 

• replace(置換したい文字列のパターン, 置換したい文字列)

 

HTML

<h1>はじめまして、俺です</h1>

 

jQuery

var h1 = $("h1").text();
var result = h1.replace("俺", "優さん");
 
$("h1").text(result);

 

結果

<h1>はじめまして、優さんです</h1>

 

 

 

/正規表現のパターン/g

マッチさせたいパターンを定義

 

.replace(/\B(?=(\d{3})+(?!\d))/g, “,”)をざっくり解説

• 値をString型に変換する
• \B
  区切り文字でないもの = この場合数字
• (?=(\d{3})
  ３桁の数字にマッチするもの。ただしマッチした3桁の数字は除外する
• \B(?=(\d{3})
  数字１つと3桁の数字の間、●の部分を拾ってくれる
  例として1000なら
  1●000
• /\B(?=(\d{3})+
  数字１つと3桁の数字の間、●の部分を1回以上繰り返しで拾ってくれる
  1000000なら
  1●000●000
• (?!\d))
  数字は含まれないパターンにマッチ。だだしマッチしたパターンから数字は除外される

 

/\B(?=(\d{3})

• \B
  区切り文字以外
• \d
  数字を表す
• {3}
  3回の繰り返し
• \d{3}
  数字文字３回の繰り返し
  「123」, 「111」, 「758」など
• (?=パターン)
  先読み言明。パターンが含まれていることが必要条件。ただし比較結果には含まれない。
• (?=(\d{3}))
  数字文字3つのパターンが含まれていることが必要条件。ただし比較結果には含まれない。

 

\B(?=(\d{3})は

区切り文字ではないもの = この場合は数字

1000

だったら、1と000の間を拾ってくれる。

１と000の間を拾って、「,」で置換する。

\B(?=(\d{3})+

1と000の間を1回以上繰り返して取得する。

(?!\d))

• ?!\d
  数字文字１文字が含まれないことが必要条件。ただし比較結果には含まれない

数字を以外のヒットを除外する

 

\B(?=(\d{3})+(?!\d))

「区切り文字ではない And 数字が３回連続で含まれるが比較結果には含まれない 」パターンに 「１回以上数字が含まれないが比較結果には含まれないをリピート」