使用JavaScript屏蔽美国电话号码字符串

Question

使用JavaScript屏蔽美国电话号码字符串

42

我需要一个针对美国电话号码格式的正则表达式。我想在JavaScript中将电话号码字符串替换为以下美国电话号码字符串格式。

var number = "4031234789";

我想以以下格式隐藏它：

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

有人可以在JavaScript中为我展示一个正则表达式吗？

- Pawan

可能是重复的问题：如何使用JavaScript掩盖HTML输入？ - mplungjan

人们在你的另一个问题上给了你很多答案。 - elclanrs

9个回答

11

你可以使用正则表达式，然后拼接成你的字符串。

var USNumber = "4031234789".match(/(\d{3})(\d{3})(\d{4})/);
USNumber = "(" + USNumber[1] + ") " + USNumber[2] + "-" + USNumber[3];
console.log(USNumber);

- Zohaib Ahmed Shakir

4

      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">

- Ali Raza

4

想在JS中发布乌兹别克斯坦的号码的人可以参考以下内容：

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

 <input type="text" id="organization_phone" name="organization_phone"  required placeholder="(+998) 99-000-00-00" value="+998">

- Akbarali

1

我本以为我已经编辑了一些内容，使其符合555-555-5555的格式，但是当我使用x [1]时，出现了一个JavaScript错误。它说未捕获的类型错误：无法读取null的属性（读取'1'）。代码仍然有效，但作为JS的平均以下用户，我仍在学习，并且我真的很想尝试理解这里发生了什么。谢谢！

 document.getElementById('Main_Phone').addEventListener('input', 
 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]);     
 });

- JoW

0

这是我的解决方案

根据维基百科，最大电话号码长度为15位数字

下面的代码实现了掩码+00 (000) 000-00-00-000

此外，退格键也可以使用

document.querySelector('[name="phone_number"]')
    .addEventListener('input', function (e) {
        var x = e.target.value.replace(/\D/g, '')
            .match(/(\d{0,2})(\d{0,3})(\d{0,3})(\d{0,2})(\d{0,2})(\d{0,3})/);

        if (!x[1]) {
            e.target.value = '+';

            return;
        }

        if (!x[2]) {
            e.target.value = `+${x[1]}`;

            return;
        }

        e.target.value = `+${x[1]} (${x[2]}`
            + ( x[3] ? `) ${x[3]}` : '' )
            + ( x[4] ? `-${x[4]}` : '' )
            + ( x[5] ? `-${x[5]}` : '' )
            + ( x[6] ? `-${x[6]}` : '' );
    });

<input name="phone_number" placeholder="+00 (000) 000-00-00-000">

- PavloM

0

    document.addEventListener("DOMContentLoaded", () => {
        const input = document.querySelector("#tel-input");

        input.addEventListener('input', (e) => {
            if (e.target.value)
            {
                const 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[2]}` : '') + (x[3] ? `-${x[3]}` : '')
            }
        });
    });

<input id="tel-input" type="tel" class="form-control" value="" placeholder="xxx-xxx-xxxx" maxlength="12"/>

- Pax Exterminatus

-1

你可以使用我的包https://github.com/jsonmaur/coverup，它可以在失焦时掩盖输入字符串并保留字符串中的符号。

- jsonmaur

-2

使用电话号码屏蔽插件即可实现。

请检查以下插件：

- Deepu

2

该问题询问如何在JavaScript中掩盖美国电话号码，而不是已经存在的库。 - Tim

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Josh Crozier · Accepted Answer

这篇回答假定你想要以下格式：(000) 000-0000（正如楼主所述）。

有多种方法可以实现这一点，但以下是几种不同的方法：

如果您想在字段失去焦点时（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"/>

或者，如果你在输入时更喜欢遮盖数字，你可以监听事件，并根据正则表达式匹配有条件地遮盖数字。

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"/>