如何使用jQuery格式化电话号码
How to format a phone number with jQuery
>我目前正在显示电话号码，例如2124771000。但是，我需要将数字格式化为更易于阅读的形式，例如：212-477-1000 .这是我目前HTML：
<p class="phone">2124771000</p>
简单：http://jsfiddle.net/Xxk3F/3/
$('.phone').text(function(i, text) {
return text.replace(/('d{3})('d{3})('d{4})/, '$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(( 方法。
var phone = '2124771000',
formatted = phone.substr(0, 3) + '-' + phone.substr(3, 3) + '-' + phone.substr(6,4)
不要忘记确保您使用的是纯整数。
var separator = '-';
$( ".phone" ).text( function( i, DATA ) {
DATA
.replace( /[^'d]/g, '' )
.replace( /('d{3})('d{3})('d{4})/, '$1' + separator + '$2' + separator + '$3' );
return DATA;
});
以下是其中一些答案的组合。这可用于输入字段。处理长度为 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(/('d{3})('d{4})/, "$1-$2");
} else if (number.length == 10) {
number = number.replace(/('d{3})('d{3})('d{4})/, "($1) $2-$3");
}
$(this).val(number)
});
}
实际示例：JSFiddle
我知道这并不能直接回答这个问题，但是当我查找答案时，这是我找到的第一页之一。所以这个答案适用于任何寻找与我正在寻找类似的东西的人。
使用库来处理电话号码。谷歌的Libphonenumber是你最好的选择。
// 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的这个包。
尝试这样的事情。
jQuery.validator.addMethod("phoneValidate", function(number, element) {
number = number.replace(/'s+/g, "");
return this.optional(element) || number.length > 9 &&
number.match(/^(1-?)?('([2-9]'d{2}')|[2-9]'d{2})-?[2-9]'d{2}-?'d{4}$/);
}, "Please specify a valid phone number");
$("#myform").validate({
rules: {
field: {
required: true,
phoneValidate: true
}
}
});
我提供了jsfiddle链接供您将美国电话号码格式化为(三十( 三十-三十
$('.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
快速滚动您自己的代码：
这是根据上面克鲁兹·努涅斯的解决方案修改的解决方案。
// 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(/('d{0,3})('d{0,3})/, "($1) $2");
} else if (number.length <= 10) {
number = number.replace(/('d{3})('d{3})('d{1,4})/, "($1) $2-$3");
} else {
// ignore additional digits
number = number.replace(/('d{3})('d{1,3})('d{1,4})('d.*)/, "($1) $2-$3");
}
$(this).val(number)
});
};
$(phoneFormatter);
JSFiddle
在此解决方案中，无论用户输入了多少位数字，都会应用格式。 (在 Nunes 的解决方案中，仅当输入了 7 或 10 位数字时，才会应用格式。
它需要输入 10 位美国电话号码的邮政编码。
但是，这两种解决方案都存在问题，因为键入的数字总是被添加到末尾。
相反，我推荐健壮的jQuery Mask插件代码，如下所述：
推荐 jQuery 掩码插件
我建议在github.
上使用jQuery Mask Plugin(页面有实时示例(这些链接对如何使用的解释很少：
- https://dobsondev.com/2017/04/14/using-jquery-mask-to-mask-form-input/
- http://www.igorescobar.com/blog/2012/05/06/masks-with-jquery-mask-plugin/
- http://www.igorescobar.com/blog/2013/04/30/using-jquery-mask-plugin-with-zepto-js/
CDN
除了安装/托管代码，您还可以添加指向脚本 CDN 的链接用于 jQuery Mask 插件的 CDN 链接
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.16/jquery.mask.min.js" integrity="sha512-pHVGpX7F/27yZ0ISY+VVjyULApbDlD0/X0rgGbTqCE7WFW5MezNTWG/dnhtbBuICzsd0WQPgpE4REBLv+UqChw==" crossorigin="anonymous"></script>
or
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.16/jquery.mask.js" integrity="sha512-pHVGpX7F/27yZ0ISY+VVjyULApbDlD0/X0rgGbTqCE7WFW5MezNTWG/dnhtbBuICzsd0WQPgpE4REBLv+UqChw==" crossorigin="anonymous"></script>
WordPress联系表格7：使用掩码表单字段插件
如果您在WordPress网站上使用Contact Form 7插件，则控制表单字段的最简单选项是，您可以简单地将类添加到输入字段中以为您处理它.
掩码表单字段插件是一个选项，使这很容易做到.
我喜欢这个选项，因为在内部，它嵌入了上面提到的jQuery掩码插件代码的最小化版本。
联系表格 7 表单上的用法示例：
<label> Your Phone Number (required)
[tel* customer-phone class:phone_us minlength:14 placeholder "(555) 555-5555"]
</label>
这里重要的部分是class:phone_us .
请注意，如果使用 minlength/maxlength ，除了数字之外，长度还必须包括掩码字符。
考虑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);
}
});
(如果您确实使用正则表达式来避免库下载，请避免在退格/删除时重新格式化将更容易更正拼写错误。
另一种解决方案：
function numberWithSpaces(value, pattern) {
var i = 0,
phone = value.toString();
return pattern.replace(/#/g, _ => phone[i++]);
}
console.log(numberWithSpaces('2124771000', '###-###-####')); $(".phoneString").text(function(i, text) {
text = text.replace(/('d{3})('d{3})('d{4})/, "($1) $2-$3");
return text;
});
输出 ：-(123( 657-8963<</p>
我在谷歌搜索通过 jQuery 插件自动格式化电话号码的方法时发现了这个问题。接受的答案对于我的需求来说并不理想，自最初发布以来的 6 年中发生了很多事情。我最终找到了解决方案，并在这里记录下来供后人参考。
问题
我希望我的电话号码 html 输入字段在用户键入时自动格式化(屏蔽(值。
溶液
看看Cleave.js。这是解决此问题以及许多其他数据屏蔽问题的一种非常强大/灵活且简单的方法。
格式化电话号码非常简单：
var cleave = new Cleave('.input-element', {
phone: true,
phoneRegionCode: 'US'
});
输入：
4546644645
法典：
PhoneNumber = Input.replace(/('d'd'd)('d'd'd)('d'd'd'd)/, "($1)$2-$3");
输出：
(454)664-4645
以下事件处理程序应执行必要的操作：
$('[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);
});
扩展 Cruz Nunez 代码并添加连续格式，并包括一些国际电话号码格式。
$('#phone').on('input', function() {
var number = $(this).val().replace(/[^'d]/g, '');
if (number.length == 3) {
number = number.replace(/('d{3})/, "$1-");
} else if (number.length == 4) {
number = number.replace(/('d{3})('d{1})/, "$1-$2");
} else if (number.length == 5) {
number = number.replace(/('d{3})('d{2})/, "$1-$2");
} else if (number.length == 6) {
number = number.replace(/('d{3})('d{3})/, "$1-$2-");
} else if (number.length == 7) {
number = number.replace(/('d{3})('d{3})('d{1})/, "$1-$2-$3");
} else if (number.length == 8) {
number = number.replace(/('d{4})('d{4})/, "$1-$2");
} else if (number.length == 9) {
number = number.replace(/('d{3})('d{3})('d{3})/, "$1-$2-$3");
} else if (number.length == 10) {
number = number.replace(/('d{3})('d{3})('d{4})/, "$1-$2-$3");
} else if (number.length == 11) {
number = number.replace(/('d{1})('d{3})('d{3})('d{4})/, "$1-$2-$3-$4");
} else if (number.length == 12) {
number = number.replace(/('d{2})('d{3})('d{3})('d{4})/, "$1-$2-$3-$4");
}
$(this).val(number);
});
有所帮助
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
- 带有加号的电话号码验证(可选）
- 正则表达式，用于在 JavaScript 中为电话号码添加短划线
- 通过Javascript将HTML中的电话号码与URL参数进行交换
- Javascript/Ajax:通过点击按钮检查有效的电子邮件和电话号码
- 如何将页面上的所有电话号码更改为可点击链接，不包括特定类别的元素
- 验证澳大利亚的电话号码
- 使用 AngularJs 格式化电话号码
- 如何对姓氏进行排序，格式化电话号码，并返回一个包含对象数组值的字符串
- 如何在键入时使用jQuery格式化US/CAN电话号码
- 如何在字符串中格式化所有电话号码(javascript）
- 在 jquery 中自动格式化电话号码
- 如何在 Rails 中格式化电话号码
- 正在格式化电话号码
- 如何使用jQuery格式化电话号码
- 谷歌地图API-格式化的电话号码显示为未定义的列表在侧栏上
- 正则表达式，用于在 Javascript 中重新格式化美国电话号码
- 使用AngularJs的ng-model在html5表单中格式化电话号码和TaxId号码
- 格式化电话号码以匹配特定模式
- 如何从格式化字符串中获取普通电话号码
- Regex电话号码实时格式化
