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

Question

我需要美国电话号码格式的常规快递。我想在 JavaScript 中将电话号码字符串替换为以下美国电话号码字符串格式。

var number = "4031234789";

我想用以下格式掩盖它：-

number = number.mask('[phone]');

任何人都可以向我展示 JavaScript 中的正则表达式吗？

Answer 1

这个答案假设您想要以下格式：

[phone]

（如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="[phone]"/>

---

或者，如果您希望在打字时屏蔽数字，您可以监听 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="[phone]"/>

Answer 2

您可以使用正则表达式，然后连接形成字符串。

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

Answer 3

对于那些想在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="([phone]" value="+998">

Answer 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="[phone]">

Answer 5

这是我的解决方案

根据维基百科，电话号码的最大长度为

15位数字

下面的代码实现了掩码

+00 [phone]-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 [phone]-000">

Answer 6

我以为我编辑了一些内容以使其匹配 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]);     
 });

Answer 7

---

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

Answer 8

我以一种稍微更优雅的方式实现了这一点，在您键入时自然添加括号和破折号：

document.addEventListener('DOMContentLoaded', (event) => {
    const phoneInput = document.getElementById('phone');

    phoneInput.addEventListener('input', (event) => {
        let input = phoneInput.value;
        let cursorPosition = phoneInput.selectionStart;

        // Remove all non-numeric characters
        let numbersOnly = input.replace(/\D/g, '');

        // Limit to maximum length of 10 digits
        if (numbersOnly.length > 10) {
            numbersOnly = numbersOnly.substring(0, 10);
        }

        // Apply formatting
        let formattedInput = '';
        if (numbersOnly.length > 0) {
            formattedInput += '(' + numbersOnly.substring(0, 3);
            if (numbersOnly.length >= 3) {
                formattedInput += ') ';
            }
        }
        if (numbersOnly.length > 3) {
            formattedInput += numbersOnly.substring(3, 6);
            if (numbersOnly.length >= 6) {
                formattedInput += '-';
            }
        }
        if (numbersOnly.length > 6) {
            formattedInput += numbersOnly.substring(6, 10);
        }

        // Set the formatted value
        phoneInput.value = formattedInput;

        // Adjust cursor position
        const formattedCursorPosition = cursorPosition + (formattedInput.length - input.length);
        phoneInput.setSelectionRange(formattedCursorPosition, formattedCursorPosition);
    });
});

body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f0f0f0;
}

.container {
    background: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

label {
    display: block;
    margin-bottom: 8px;
}

input {
    width: 200px;
    padding: 8px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Phone Number Input Mask</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <label for="phone">Phone Number:</label>
        <input type="text" id="phone" placeholder="(xxx) xxx-xxxx" maxlength="14">
    </div>

    <script src="script.js"></script>
</body>
</html>

Answer 9

你可以使用我的包

https://github.com/jsonmaur/coverup，它可以对输入字符串进行onblur屏蔽，并维护字符串中的符号。

Answer 10

为此使用电话号码屏蔽插件。

检查以下插件：

• http://wiki.jqueryui.com/w/page/12137996/Mask

• http://igorescobar.github.io/jQuery-Mask-Plugin/

• http://digitalbush.com/projects/masked-input-plugin/