JavaScript

jQuery通貨区切り・正規表現

jQuery

 

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

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桁の数字にマッチするもの。ただしマッチした3桁の数字は除外する
  • \B(?=(\d{3})
    数字1つと3桁の数字の間、●の部分を拾ってくれる
    例として1000なら
    1●000
  • /\B(?=(\d{3})+
    数字1つと3桁の数字の間、●の部分を1回以上繰り返しで拾ってくれる
    1000000なら
    1●000●000
  • (?!\d))
    数字は含まれないパターンにマッチ。だだしマッチしたパターンから数字は除外される

 

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

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

 

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

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

1000

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

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

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

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

(?!\d))

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

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

 

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

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

 

 

 

 

 

 

 

爆速レンタルサーバならConoHa WING

 

サーバはプロに全部お任せ!「仕事」に専念したいあなたにおすすめです。

   

ConoHa VPSで運営してま🐱

 

サーバの勉強がしたいあなたにおすすめ!現役エンジニアの管理人が選んだ、WordPress運用に適したVPSの終着点

   

ConoHa VPSで爆速WordPressを作ろう! 

 

Laravel, AWS ポートフォリオ作成サポート! 定員3名

https://menta.work/plan/2381

Laravel, AWSによるポートフォリオ作成を通して、エンジニア転職をサポートします

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)