Cách định dạng số điện thoại bằng jQuery

Tôi hiện đang hiển thị số điện thoại như 2124771000. Tuy nhiên, tôi cần số phải được định dạng trong một hình thức con người dễ đọc hơn, ví dụ: 212-477-1000. Đây là hiện tại của tôi HTML:

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

Đơn giản: http://jsfiddle.net/Xxk3F/3/

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

Hoặc: 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');
});

Lưu ý: Không thể sử dụng phương thức .text () trên các phần tử đầu vào. Đối với văn bản trường nhập, hãy sử dụng phương thức .val ().

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

Đừng quên đảm bảo rằng bạn đang làm việc với các số nguyên thuần túy.

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;
});

Dưới đây là sự kết hợp của một số câu trả lời. Điều này có thể được sử dụng cho các trường đầu vào. Ưu đãi cho các số điện thoại có độ dài từ 7 đến 10 chữ số.

// 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)
  });
}

Ví dụ trực tiếp: JSFiddle

Tôi biết điều này không trực tiếp trả lời câu hỏi, nhưng khi tôi tìm kiếm câu trả lời, đây là một trong những trang đầu tiên tôi tìm thấy. Vì vậy, câu trả lời này dành cho bất kỳ ai đang tìm kiếm thứ gì đó tương tự như những gì tôi đang tìm kiếm.

Sử dụng thư viện để xử lý số điện thoại. Libphonenumber của Google là lựa chọn tốt nhất của bạn.

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

Tôi khuyên bạn nên sử dụng gói này của seegno.

Tôi đã cung cấp liên kết jsfiddle để bạn định dạng các số điện thoại của Hoa Kỳ là (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('');
  }
});

Ví dụ trực tiếp: JSFiddle

thử một cái gì đó như thế này ..

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
    }
  }
});

Hãy xem xét libphonenumber-js ( https://github.com/halt-hammerzeit/libphonenumber-js ) là phiên bản nhỏ hơn của libphonenumber đầy đủ và nổi tiếng.

Ví dụ nhanh và bẩn:

$(".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);
}
});

(Nếu bạn sử dụng regex để tránh tải xuống thư viện, hãy tránh định dạng lại trên backspace / delete sẽ giúp bạn sửa lỗi chính tả dễ dàng hơn.)

Một giải pháp thay thế:

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

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

Tôi tìm thấy câu hỏi này khi tìm kiếm cách tự động định dạng số điện thoại thông qua plugin jQuery. Câu trả lời được chấp nhận không lý tưởng cho nhu cầu của tôi và rất nhiều điều đã xảy ra trong 6 năm kể từ khi nó được đăng ban đầu. Cuối cùng tôi đã tìm ra giải pháp và đang ghi lại nó ở đây cho hậu thế.

Vấn đề

Tôi muốn trường nhập html của số điện thoại của mình được tự động định dạng (mặt nạ) giá trị khi người dùng nhập.

Giải pháp

Xem Cleave.js . Đây là một cách rất mạnh mẽ / linh hoạt và dễ dàng để giải quyết vấn đề này cũng như nhiều vấn đề khác về mặt nạ dữ liệu.

Định dạng số điện thoại dễ dàng như sau:

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

Đầu vào:

4546644645

Mã:

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

OutPut:

(454)664-4645

 $(".phoneString").text(function(i, text) {
            text = text.replace(/(\d{3})(\d{3})(\d{4})/, "($1) $2-$3");
            return text;
        });

Đầu ra :-( 123) 657-8963

Có thể điều này sẽ giúp

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('');

bạn sẽ nhận được + 91-123-456-7890