javascript - JavaScript で米国の電話番号文字列をマスクする

Question

米国の電話番号形式の正規表現が必要です。電話番号の文字列を、JavaScript で米国の電話番号の文字列形式の下に置き換えたいと考えています。

var number = "4031234789";

そして、以下の形式でマスクしたい:-

number = number.mask('(000) 000-0000');

JavaScript での正規表現を教えてもらえますか?

Answer 1

この回答では、次の形式が必要であると想定しています: (000) 000-0000(OP の状態)。

^{これを実装するには複数の異なる方法がありますが、ここではいくつかの異なるアプローチを示します。}

---

イベントの数字を単純にマスクしたい場合blur(フィールドが失われたときfocus)、次のように使用できます。

document.getElementById('phone').addEventListener('blur', function (e) {
  var x = e.target.value.replace(/\D/g, '').match(/(\d{3})(\d{3})(\d{4})/);
  e.target.value = '(' + x[1] + ') ' + x[2] + '-' + x[3];
});

<p>Masked on the blur event (remove focus).</p>
<input type="text" id="phone" placeholder="(555) 555-5555"/>

---

または、入力中に番号をマスクしたい場合は、イベントをリッスンしinput、正規表現の一致に基づいて条件付きで番号をマスクできます。

document.getElementById('phone').addEventListener('input', function (e) {
  var x = e.target.value.replace(/\D/g, '').match(/(\d{0,3})(\d{0,3})(\d{0,4})/);
  e.target.value = !x[2] ? x[1] : '(' + x[1] + ') ' + x[2] + (x[3] ? '-' + x[3] : '');
});

<input type="text" id="phone" placeholder="(555) 555-5555"/>

Answer 2

      document.getElementById('organization_phone').addEventListener('input', function (e) {
        var x = e.target.value.replace(/\D/g, '').match(/(\d{0,3})(\d{0,3})(\d{0,4})/);
        e.target.value = '(' +x[1] + ') '+ x[2] + '-' + x[3]
      });

<input type="text" id="organization_phone" name="organization_phone"  required placeholder="(998) 000-0000">

Answer 3

私のパッケージhttps://github.com/jsonmaur/coverupを使用できます。これは、入力文字列 onblur をマスクし、文字列内の記号を維持できます。