正規表現で正の整数でカンマを設定する

フォーカスするとカンマが正の整数のみに動作し、フォーカスアウトするとカンマが消える機能を作っております。
以下のサイトの正規表現を使って試してみましたが機能しません。
https://frontenddaily.work/jquery_isnumber/546
アドバイス頂けたら幸いです

<html lang="ja">
<head>
<meta charset="UTF-8">
<title>カンマをつける</title>
</head>
<body>
<input type="text" id="textBox" value="123456789" />
<script src="http://code.jquery.com/jquery-2.2.3.min.js"></script>
<script>
$(function() {

  // フォーカス
  $('#income').on('focus', function(){
    var num = $(this).val();
    num = num.replace(/^([1-9]\d*|0)$/'');
    $(this).val(num);
  });

  // フォーカスアウト
  $('#income').on('blur', function(){
    var num = $(this).val();
    num = num.replace(/,/g, '');
    $(this).val(num);
  });

});
</script>
</body>
</html>
コード

jun68ykt

2020/05/29 01:01

正規表現を使うことは、ご質問の必須要件なのでしょうか？または、必ずしも正規表現を使わなくもよいのでしょうか？

Masaru0217

2020/05/29 01:09

コンタクトフォームの年収の欄を見やすくするために、カンマを付けたり、消したりしたいので、必須条件ではないです。よろしくお願いいたします。

行動規範の内容に同意します

回答3件

本題ではありませんが、そういう「表示文字列を加工する」ような入力は、うまく作らないと使い勝手が悪くなります。

たとえば、（縦棒はカーソルです）

123,456|となっているときに7を入力すれば123,4567|ではなく1,234,567|になってほしい
123,|456でバックスペースを押せば12|,456となってほしい

など、キーの操作1つに応じて中身の文字列とカーソル位置の両方を正しく制御しないと、入力する側のストレスになるかと思います。

投稿2020/05/29 00:56

maisumakun

総合スコア146018

Masaru0217

2020/05/29 01:51

なるほど。今回は自分の練習の為に作ったものなのでよかったですが、実際に誰かに見てもらう、使ってもらうときは、その機能が必要かどうかを考え付け足したいと思います。

行動規範の内容に同意します

こんにちは

数値を３桁ずつのカンマ区切りにするには、toLocaleString が便利です。以下はこれを使った例です。

javascript
1  // フォーカス
2  $('#income').on('focus', function(){
3    var num = +$(this).val();
4    if (num > 0) {
5      $(this).val(num.toLocaleString());
6    }
7  });
8
9  // フォーカスアウト
10  $('#income').on('blur', function(){
11    var num = $(this).val();
12    num = +num.replace(/[^0-9]/g, '');
13    $(this).val(num);
14  });