エクセルのような正規表現（正負、小数点、ゼロ埋め、半角数値、カンマ位置）

Question

エクセルのセルを直接入力する近い感覚でinput type="text"を正規表現によりコントロールしようとしております。
条件としては

1. 正負について、文頭の「-」は許可、「＋」は許可しない
2. ゼロ埋めは許可しない
3. 文頭の小数点は許可しない
4. 4桁以上の数字を入力する場合、3桁毎のカンマは許可する
5. 上記の許可するものと半角数値を除き、許可しない

extra ) フォーカス中はカンマを表示しない

$(function(){
  $(document).on('focus','.text_input',function(){
    let num=$(this).val();
    num = num.replace(/,/g, '');
    $(this).val(num);//フォーカス中はカンマを表示しない
  })

  $(document).on('blur','.text_input',function(){
    let num=$(this).val();
    if (num.match(/^[-]?([1-9]\d*|0)(.\d+)?$/)) {
          num = num.replace(/(\d)(?=(\d\d\d)+$)/g, '$1,');//文頭マイナス許可、小数点文頭以外許可、ゼロ埋め不許可、それ以外の半角数値許可
          $(this).val(num);
    }else{
      $(this).val('');
    }
  })
})

4)以外は上記の正規表現で満たすことに成功したのですが、4)がとても難しいです。
例えば、3桁以上の数値が入力されている状況で考えているのですが、0埋めや小数点の位置を加味すると
急に複雑化するため、頭を悩ませております。むしろこれに対応しているエクセルはすごいなとさえ思っているところです。。

2,33は許可しない
2,233は許可する
0,033等は許可しないの（ゼロ埋めを含む4桁は許可しない）
0.223,344は許可せず(小数点以下はカンマは付さない)
2,355.33は許可する（整数部分が4桁以上のため許可）

blurされたらはじくようにしたいのですが、良いアイデア等があればご助言を賜りたく存じます。
宜しくお願い申し上げます。

Answer 1

こんにちは。

一度に複雑な判定をやり切る正規表現を書こうとすると、後からデバッグしたり、機能を追加、修正するときに大変そうなので、入力値のバリデーション全体をいくつかのステップに分け、各ステップでは、目的が明確なチェック、または置換を行うという方向で以下を作成しました。(動作を明確にするため、エラーメッセージを表示する <span> とCSSを追加しています。）

<input class="text_input" />
<br />
<span id="error_message" />

input { 
  border: 1px solid #444;
  font-size: 32px; 
  width: 240px; 
}
.valid { text-align: right;  }
.error { border: medium solid red;  }

$(document).on('focus', '.text_input', function() {

    if (!$(this).hasClass('error')) {
        let num = $(this).val();
        num = num.replace(/,/g, '');
        $(this).val(num); // フォーカス中はカンマを消去
    }

    // バリデーション結果を表すクラスを削除
    $(this)
        .removeClass('valid')
        .removeClass('error');

    // エラーメッセージを消去
    $('#error_message').text('');
});

$(document).on('input', '.text_input', function() {
    if ($(this).val() === '')
        $(this).data('comma-separated', false);
});

const validate = (str, option) => {

    // 最初にトリミングしておく
    str = str.trim();

    if (str.length === 0)
        return str;

    // チェック1: 先頭にのみ-を許容し、半角数字と何個かのカンマと、０個または１個のピリオドで構成されること
    let groups = /^([-]?)([0-9,]+)(.[0-9]*)?$/.exec(str);

    if (!groups)
        throw new Error('許容されない文字を含む。あるいは許容されない位置に数字以外の文字がある。');

    // チェック2： 整数部分が２文字以上の場合、０から始まっていないこと
    if (/^0./.test(groups[2]))
        throw new Error('整数部分が2文字以上であり、かつ0で始まっている。');

    // チェック3: 整数部分にカンマが含まれる場合、正しく下の桁から３桁ごとに区切られている。
    if (groups[2].includes(',') && !/^[^,]{1,3}(,[^,]{3})+$/.test(groups[2])) {
        throw new Error('整数部分のカンマ区切りが正しく３桁ごとになっていない。');
    }

    // 置換1: 整数部分にカンマが含まれず、かつオプションでカンマ区切りが指定されていれば、カンマ区切りに変換
    if (!groups[2].includes(',') && option.commaSeparated)
        groups[2] = Number(groups[2]).toLocaleString('ja-JP');

    // 置換2： 小数部分が存在し、かつ、小数部分の末尾が１個以上の0の場合、この末尾の０を削除する。
    if (groups[3] && groups[3].length > 1) {
        const m = /^.([0-9]*[1-9])?(0+)$/.exec(groups[3]);
        if (m)
            groups[3] = (m[1] ? '.' + m[1] : '');
    }

    // 置換3： 小数点はあるが、少数点の後ろに数字がない場合、小数部分を空文字列にする。
    if (groups[3] === '.')
        groups[3] = '';

    return groups[1] + groups[2] + (groups[3] || '');
};


$(document).on('blur', '.text_input', function() {

    try {
        // 入力値をチェックし、かつ不要な文字を除去した文字列を取得
        const str = validate(
          $(this).val(), 
          { commaSeparated: $(this).data('comma-separated') }
        );

        // チェックが通った場合、置換後の文字列をinputに設定
        $(this).val(str)

        // 入力文字列が空ではない場合、エラーの通ったことを示すクラスを追加
        if (str.length > 0)
            $(this).addClass('valid');

        // セルの表示状態をカンマありにするかどうかのフラグ設定
        $(this).data('comma-separated', str.includes(','));

    } catch (e) {
        // エラー状態を示すクラスを追加
        $(this).addClass('error');

        // エラーメッセージを表示
        $('#error_message').text(e.message);
    }
});

上記のコードを以下に上げていますので、実際に入力してお試し頂ければと思います。

https://jsfiddle.net/jun68ykt/nym6bxLh/3/

動作について、ご質問にある

1. 正負について、文頭の「-」は許可、「＋」は許可しない

1. ゼロ埋めは許可しない
2. 文頭の小数点は許可しない
3. 4桁以上の数字を入力する場合、3桁毎のカンマは許可する
4. 上記の許可するものと半角数値を除き、許可しない

extra ) フォーカス中はカンマを表示しない

は満たせているのではないかと思います。さらに上記に加えて、以下のように動作します

1. 数値を入力してからフォーカスを外し、入力値の検査後、入力値に

• 問題がなければ右寄せで表示される。（Excelと同様）
• 問題があると、<input>が赤い線で囲まれ、かつエラーメッセージが表示される。

1. 少数点はあっても小数点以下の数字がない場合、たとえば 55. と入力してフォーカスを外すと、少数点は除去されて、55と表示される。（Excelと同様）

　　
3) 初めにカンマ区切りの数字、たとえば 123,555 を入力して一度フォーカスを外してから、再度、フォーカスすると、カンマのない文字列になるが、何らかの修正後に再度フォーカスを外し、値に問題がない場合、カンマ区切り表示に戻る。その後、いったん空欄にすると、カンマ区切り表示モードは解除される。

1. 小数点以下の数字の末尾にいくつかの 0 がある場合、たとえば 12.340500と入力してフォーカスを外すと、末尾の余分な 0 は除去されて,12.3405と表示される。（Excelと同様）

以上です。

pegyさんの要件、あるいはご要望どおりではないところが何かあれば、コメントからお知らせください。

Comments

[pegy]

jun68ykt様
詳細なコードやご解説までのことして頂き、本当に有難うございます。
そしてこの質問のために、多くの時間を割いて頂きましたことにお詫びをさせてください。

また、ご考慮頂いた中でも2)の小数点を打った数字以下の小数が存在しない場合や4)で小数点の最下位の"0"等そのようなケースにまで全く考えが及んでおりませんでした。

ユーザー入力について、想定すべき可能性やバリデーションについて、もっともっと検討が必要で勉強と経験をしなければならないと痛感させられました。

本当に勉強になりました。
改めまして、厚い御礼を申し上げます。

[jun68ykt]

pegyさん

どういたしまして。
このような入力値の形式にそったバリデーションを自作する場合、作って動かしてみることで、他にも対応しなければならない入力パターンがあることに気がつき、
> 考えが及んでおりませんでした。
というケースに遭遇することはよくあることです。なのでそのたびに少しずつ機能拡張したり、既存機能を修正することになりますから、１つずつ足していく機能単位（ここでは、３つの検証と３つの置換の６個）の個々を、取り外したり、別のものを足したりがしやすいように見通しよく作っておき、新しい１個を追加するコードを書いている途中で袋小路にハマってうまくいかなくなっても、それを追加する前の間違いなく動いている状態にすぐに戻せるような作り方をするとよいかと思います。

Answer 2

セルの書式設定

extra ) フォーカス中はカンマを表示しない

ということは、blur イベント発火中はカンマがありませんので、「4)4桁以上の数字を入力する場合、3桁毎のカンマは許可する」の条件が不要ではありませんか。

/^-?(?:[1-9]\d*|0)(?:.\d*[1-9])?$/

ゼロサプレス

1. ゼロ埋めは許可しない

Excel ではゼロパディングはゼロサプレスに変換されますが、ゼロパディングの入力は許可されています。

string.replace(/^(-?)0*((?:[1-9]\d*|0)(?:.\d*[1-9])?)0*$/, '$1$2');

Re: pegy さん

Comments

[pegy]

think49様
コメント頂き有難うございます。
>セルの書式設定
こちらについては、実はカンマ付きの数字をコピペした時に123,456を正しくコピペしているにも関らず、許可されなくなってしまうという問題でございました。当初から全ての状況を想定しお尋ねすべきところであったのですが、やりながらこんなケースもあるというところに気づき混乱をさせてしまい申し訳ございません。ただし、こちらはblur以外のコピペに対応するイベントを設定することで対応できそうです。
>ゼロサプレス
についてもありがとうございます。確かに0からはじまる数字を入力した場合、0以外の数値がその後入力次第で許可されますね。

改めて御礼申し上げます。

Answer 3

正規表現では微妙なので
一度カンマを取ったものを数値化しカンマフォーマットをかけたものと
元の値を比べるとどうでしょうか？

["12345678","12,345,678","12345,678","1,2345,678","2,33","2,233","0,033","0.223,344","2,355.3344"].forEach(function(x1){
  var x2=parseFloat(x1.replace(/,/g,"")).toString().replace(/^(-?[0-9]+)(?=.|$)/, function(s){ return s.replace(/([0-9]+?)(?=(?:[0-9]{3})+$)/g, '$1,')});
  console.log(x1+((x1===x2||x1===x2.replace(/,/g,""))?"ok":"ng"));
});

Comments

[pegy]

yambejp様
なるほど、その様なアプローチは全く思いつきませんでした。
こちらの方法で実装してみようと思います。
大変勉強になりました。

Answer 4

これでどうでしょうか？

/^(?:0|-?[1-9]\d{0,2}(?:,?\d{3})*)(?:.\d*[1-9])?$/

Comments

[yambejp]

難しいところですが、「1234,567」のような中途半端なカンマも
通っちゃいますね。

[x_x]

「エクセルのような」ということなので、いいのではないでしょうか？

[pegy]

コメント有難うございます。
ご指摘の盲点に気が付かず、申し訳ございません。結論としては、許可しないです。7桁以上であって、カンマが一つしかないも許可をせず、エクセルも強制的に文字列認識であったと思います。最後の点、認識違いがあれば申し訳ございません。

[x_x]

一応Excelで確認したうえでの投稿ですが、許可しないなら該当箇所の?を外せばいいのでは？

[yambejp]

Excelでは「1234,567」は「1,234,567」に変換されるから
「エクセルのような」という意味で言えばNGでしょう

[x_x]

それはreplaceのほうの話では？
この正規表現は「はじく」ほうの話のみです