如何使用 jQuery 格式化电话号码

Posted 2023-04-14

技术标签:

【中文标题】如何使用 jQuery 格式化电话号码【英文标题】：How to format a phone number with jQuery 【发布时间】：2012-01-06 15:20:07 【问题描述】：

我目前正在显示电话号码，例如2124771000。但是，我需要将数字格式化为更易于阅读的形式，例如：212-477-1000。这是我目前的html：

<p class="phone">2124771000</p>

【问题讨论】：

回答太晚了，只是为了帮助那些登陆此页面的人 URL：igorescobar.github.io/jQuery-Mask-Plugin 不确定我是否理解这个的关闭状态。 Not Constructive 似乎不正确...我发现此信息非常有用，并且与将我带到这里的问题直接相关。我不反对它已关闭的事实，但显示的关闭原因也许这个问题已经过编辑并且之前描述性较差......这似乎是一个完全有效的 SO 问题和对我的回答，以及很多赞成票。谷歌库 github.com/googlei18n/libphonenumber 不需要 jQuery。 【参考方案1】：

简单：http://jsfiddle.net/Xxk3F/3/

$('.phone').text(function(i, text) 
    return text.replace(/(\d3)(\d3)(\d4)/, '$1-$2-$3');
);

或者：http://jsfiddle.net/Xxk3F/1/

$('.phone').text(function(i, text) 
    return text.replace(/(\d\d\d)(\d\d\d)(\d\d\d\d)/, '$1-$2-$3');
);

注意：.text() 方法不能用于输入元素。对于输入字段文本，请使用 .val() 方法。

【讨论】：

我已对此进行了修改以支持输入字段中的“更改”事件。 jsfiddle.net/gUsUK 在没有区号的情况下，更强大的正则表达式（尽管它需要自定义替换功能）将是 /(\d3)?(\d3)(\d4)$/ 对全世界的电话号码都有效吗？如果页面上有多个电话号码，请考虑使用 $(selector).each() 函数轻松将此掩码应用于所有号码。我想用按键和模糊事件来实现它。数字小于 10 时不格式化电话号码。示例代码为：

$('#x_phone').on('keypress blur',function()  		var ph = $(this).val(); 		 		var temp = ph.replace(/(\d3)(\d3)(\d4)/, '$1-$2-$3'); 		$(this).val(temp); 		//alert(temp); 	);

【参考方案2】：

var phone = '2124771000',
    formatted = phone.substr(0, 3) + '-' + phone.substr(3, 3) + '-' + phone.substr(6,4)

【讨论】：

@AndreasAL：因为正则表达式引擎的开销很大，特别是对于输入格式已知且简单的字符串操作更有效的情况。当然，有一个规则是，使用正则表达式解决一个问题只会让你遇到两个问题。此解决方案还可以正确格式化带有字母的电话号码，例如“212555IDEA”。这在 windows 环境下运行良好，但在 ios 设备上不运行。有没有在这两个平台上都可以使用的替代方法【参考方案3】：

不要忘记确保您使用的是纯整数。

var separator = '-';
$( ".phone" ).text( function( i, DATA ) 
    DATA
        .replace( /[^\d]/g, '' )
        .replace( /(\d3)(\d3)(\d4)/, '$1' + separator + '$2' + separator + '$3' );
    return DATA;
);

【讨论】：

【参考方案4】：

以下是其中一些答案的组合。这可用于输入字段。处理长度为 7 位和 10 位的电话号码。

// Used to format phone number
function phoneFormatter() 
  $('.phone').on('input', function() 
    var number = $(this).val().replace(/[^\d]/g, '')
    if (number.length == 7) 
      number = number.replace(/(\d3)(\d4)/, "$1-$2");
     else if (number.length == 10) 
      number = number.replace(/(\d3)(\d3)(\d4)/, "($1) $2-$3");
    
    $(this).val(number)
  );

现场示例：JSFiddle

我知道这并不能直接回答问题，但是当我查找答案时，这是我找到的第一页之一。因此，此答案适用于任何搜索与我正在搜索的内容相似的内容的人。

【讨论】：

【参考方案5】：

使用库来处理电话号码。 Libphonenumber by Google 是您最好的选择。

// Require `PhoneNumberFormat`.
var PNF = require('google-libphonenumber').PhoneNumberFormat;

// Get an instance of `PhoneNumberUtil`.
var phoneUtil = require('google-libphonenumber').PhoneNumberUtil.getInstance();

// Parse number with country code.
var phoneNumber = phoneUtil.parse('202-456-1414', 'US');

// Print number in the international format.
console.log(phoneUtil.format(phoneNumber, PNF.INTERNATIONAL));
// => +1 202-456-1414

我建议通过seegno 使用package。

【讨论】：

【参考方案6】：

我为您提供了 jsfiddle 链接，用于将美国电话号码格式化为 (XXX) XXX-XXX

 $('.class-name').on('keypress', function(e) 
  var key = e.charCode || e.keyCode || 0;
  var phone = $(this);
  if (phone.val().length === 0) 
    phone.val(phone.val() + '(');
  
  // Auto-format- do not expose the mask as the user begins to type
  if (key !== 8 && key !== 9) 
    if (phone.val().length === 4) 
      phone.val(phone.val() + ')');
    
    if (phone.val().length === 5) 
      phone.val(phone.val() + ' ');
    
    if (phone.val().length === 9) 
      phone.val(phone.val() + '-');
    
    if (phone.val().length >= 14) 
      phone.val(phone.val().slice(0, 13));
    
  

  // Allow numeric (and tab, backspace, delete) keys only
  return (key == 8 ||
    key == 9 ||
    key == 46 ||
    (key >= 48 && key <= 57) ||
    (key >= 96 && key <= 105));
)

.on('focus', function() 
  phone = $(this);

  if (phone.val().length === 0) 
    phone.val('(');
   else 
    var val = phone.val();
    phone.val('').val(val); // Ensure cursor remains at the end
  
)

.on('blur', function() 
  $phone = $(this);

  if ($phone.val() === '(') 
    $phone.val('');
  
);

现场示例：JSFiddle

【讨论】：

如何更改此模式以从左到右显示数字 ==> (021)88888888【参考方案7】：

试试这样的..

jQuery.validator.addMethod("phoneValidate", function(number, element) 
    number = number.replace(/\s+/g, ""); 
    return this.optional(element) || number.length > 9 &&
        number.match(/^(1-?)?(\([2-9]\d2\)|[2-9]\d2)-?[2-9]\d2-?\d4$/);
, "Please specify a valid phone number");

$("#myform").validate(
  rules: 
    field: 
      required: true,
      phoneValidate: true
    
  
);

【讨论】：

【参考方案8】：

考虑 libphonenumber-js (https://github.com/halt-hammerzeit/libphonenumber-js)，它是完整且著名的 libphonenumber 的较小版本。

快速而肮脏的例子：

$(".phone-format").keyup(function() 
// Don't reformat backspace/delete so correcting mistakes is easier
if (event.keyCode != 46 && event.keyCode != 8) 
    var val_old = $(this).val();
    var newString = new libphonenumber.asYouType('US').input(val_old);
    $(this).focus().val('').val(newString);

);

（如果您确实使用正则表达式来避免库下载，请避免在退格/删除时重新格式化将更容易纠正拼写错误。）

【讨论】：

【参考方案9】：

另一种解决方案：

function numberWithSpaces(value, pattern) 
  var i = 0,
    phone = value.toString();
  return pattern.replace(/#/g, _ => phone[i++]);


console.log(numberWithSpaces('2124771000', '###-###-####'));

【讨论】：

【参考方案10】：

快速滚动你自己的代码：

这里是上面Cruz Nunez's solution修改的解决方案。

// Used to format phone number
function phoneFormatter() 
  $('.phone').on('input', function() 
    var number = $(this).val().replace(/[^\d]/g, '')
    if (number.length < 7) 
      number = number.replace(/(\d0,3)(\d0,3)/, "($1) $2");
     else if (number.length <= 10) 
    number = number.replace(/(\d3)(\d3)(\d1,4)/, "($1) $2-$3");
     else 
    // ignore additional digits
    number = number.replace(/(\d3)(\d1,3)(\d1,4)(\d.*)/, "($1) $2-$3");
    
    $(this).val(number)
  );
;

$(phoneFormatter);

JSFiddle

在此解决方案中，无论用户输入多少位数，都会应用格式。（在 Nunes 的解决方案中，仅在输入 7 位或 10 位数字时才应用格式。）

需要输入 10 位美国电话号码的邮政编码。

然而，这两种解决方案，编辑已经输入的数字都是有问题的，因为输入的数字总是被添加到末尾。

我推荐使用健壮的 jQuery Mask 插件代码，如下所述：

WordPress Contact Form 7：使用 Masks Form Fields 插件

如果您在 WordPress 网站上使用 Contact Form 7 插件，控制表单字段的最简单选项是您可以简单地向输入字段添加一个类来为您处理它。Masks Form Fields plugin 是一个选项，让这很容易做到。我喜欢这个选项，因为它在内部嵌入了上述jQuery Mask Plugin 代码的最小化版本。

Contact Form 7 表单的用法示例：

<label> Your Phone Number (required)
    [tel* customer-phone class:phone_us minlength:14 placeholder "(555) 555-5555"]
</label>

这里的重要部分是class:phone_us。请注意，如果您使用minlength/maxlength，则长度必须包括掩码字符以及数字。

【讨论】：

一个问题是，你不能删除前三个数字:( 如果您不想要区号，请尝试类似：minlength:8 placeholder "555-5555"?我已经有一段时间不用调整我的代码了，也不记得关于如何编辑库或临时模板的细节。您可以忽略返回的区号，但是如何使其对用户不可见，或者用用户无法编辑（或查看）的字符填充它，我不确定。我确实制作了一次自定义版本的库来制作自定义字段。我发现修改起来并不难。然后我意识到甚至不需要这些模组。如果模板不起作用，也许可以尝试看看他们的代码？【参考方案11】：

我在谷歌搜索通过 jQuery 插件自动格式化电话号码的方法时发现了这个问题。接受的答案并不适合我的需求，自最初发布以来的 6 年里发生了很多事情。我最终找到了解决方案，并在此处记录下来以供后代使用。

问题

我希望我的电话号码 html 输入字段在用户键入时自动格式化（屏蔽）值。

解决方案

查看Cleave.js。这是解决此问题以及许多其他数据屏蔽问题的一种非常强大/灵活且简单的方法。

格式化电话号码很简单：

var cleave = new Cleave('.input-element', 
    phone: true,
    phoneRegionCode: 'US'
);

【讨论】：

【参考方案12】：

输入：

4546644645

代码：

PhoneNumber = Input.replace(/(\d\d\d)(\d\d\d)(\d\d\d\d)/, "($1)$2-$3");

输出：

(454)664-4645

【讨论】：

【参考方案13】：

 $(".phoneString").text(function(i, text) 
            text = text.replace(/(\d3)(\d3)(\d4)/, "($1) $2-$3");
            return text;
        );

输出：-(123) 657-8963

【讨论】：

【参考方案14】：

以下事件处理程序应该做必要的事情：

$('[name=mobilePhone]').on('keyup', function(e)
                    var enteredNumberStr=this.$('[name=mobilePhone]').val(),                    
                      //Filter only numbers from the input
                      cleanedStr = (enteredNumberStr).replace(/\D/g, ''),
                      inputLength=cleanedStr.length,
                      formattedNumber=cleanedStr;                     
                                      
                      if(inputLength>3 && inputLength<7) 
                        formattedNumber= cleanedStr.substr(0,3) + '-' + cleanedStr.substr(3,inputLength-1) ;
                      else if (inputLength>=7 && inputLength<10) 
                          formattedNumber= cleanedStr.substr(0,3) + '-' + cleanedStr.substr(3,3) + '-' + cleanedStr.substr(6,inputLength-1);                          
                      else if(inputLength>=10) 
                          formattedNumber= cleanedStr.substr(0,3) + '-' + cleanedStr.substr(3,3) + '-' + cleanedStr.substr(6,inputLength-1);                        
                      
                      console.log(formattedNumber);
                      this.$('[name=mobilePhone]').val(formattedNumber);
            );

【讨论】：

【参考方案15】：

扩展 Cruz Nunez 代码并添加连续格式，并包括一些国际电话号码格式。

    $('#phone').on('input', function() 
      var number = $(this).val().replace(/[^\d]/g, '');
      if (number.length == 3) 
        number = number.replace(/(\d3)/, "$1-");
       else if (number.length == 4) 
        number = number.replace(/(\d3)(\d1)/, "$1-$2");
       else if (number.length == 5) 
        number = number.replace(/(\d3)(\d2)/, "$1-$2");
       else if (number.length == 6) 
        number = number.replace(/(\d3)(\d3)/, "$1-$2-");
       else if (number.length == 7) 
        number = number.replace(/(\d3)(\d3)(\d1)/, "$1-$2-$3");
       else if (number.length == 8) 
        number = number.replace(/(\d4)(\d4)/, "$1-$2");
       else if (number.length == 9) 
        number = number.replace(/(\d3)(\d3)(\d3)/, "$1-$2-$3");
       else if (number.length == 10) 
        number = number.replace(/(\d3)(\d3)(\d4)/, "$1-$2-$3");
       else if (number.length == 11) 
        number = number.replace(/(\d1)(\d3)(\d3)(\d4)/, "$1-$2-$3-$4");
       else if (number.length == 12) 
        number = number.replace(/(\d2)(\d3)(\d3)(\d4)/, "$1-$2-$3-$4");
      
      $(this).val(number);
    );

【讨论】：

【参考方案16】：

也许这会有所帮助

var countryCode = +91;
var phone=1234567890;
phone=phone.split('').reverse().join('');//0987654321
var formatPhone=phone.substring(0,4)+'-';//0987-
phone=phone.replace(phone.substring(0,4),'');//654321
while(phone.length>0)
formatPhone=formatPhone+phone.substring(0,3)+'-';
phone=phone.replace(phone.substring(0,3),'');

formatPhone=countryCode+formatPhone.split('').reverse().join('');

您将获得 +91-123-456-7890

【讨论】：

以上是关于如何使用 jQuery 格式化电话号码的主要内容，如果未能解决你的问题，请参考以下文章

使用 jQuery 插件自动格式化结构化数据（电话、日期）（或无法使用原生 JavaScript）

javascript 如何使用jQuery通过Google Universal Analytics跟踪电话号码和按钮点击等自定义事件。

如何将文本重新格式化为不同的模式？

如何在 vim 命令中使用正则表达式格式化电话号码列表？

如何使用 PhoneNumberUtils 库将电话号码格式化为没有国家前缀的国家格式？

如何在反应中使用 TextInput 格式化电话号码 - 管理员

如何使用 jQuery 格式化电话号码

快速滚动你自己的代码：

推荐jQuery Mask插件

WordPress Contact Form 7：使用 Masks Form Fields 插件