Cara memformat nomor telepon dengan jQuery

Saya sedang menampilkan nomor telepon seperti 2124771000. Namun, saya perlu nomor yang akan diformat dalam bentuk terbaca-manusia yang lebih, misalnya: 212-477-1000. Inilah saya saat ini HTML:

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

Sederhana: http://jsfiddle.net/Xxk3F/3/

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

Atau: 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');
});

Catatan: Metode .text () tidak dapat digunakan pada elemen masukan. Untuk memasukkan teks kolom, gunakan metode .val ().

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

Jangan lupa untuk memastikan Anda bekerja dengan bilangan bulat murni.

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

Berikut kombinasi dari beberapa jawaban ini. Ini dapat digunakan untuk bidang masukan. Berurusan dengan nomor telepon yang panjangnya 7 dan 10 digit.

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

Contoh langsung: JSFiddle

Saya tahu ini tidak langsung menjawab pertanyaan, tetapi ketika saya mencari jawaban, ini adalah salah satu halaman pertama yang saya temukan. Jadi jawaban ini untuk siapa saja yang mencari sesuatu yang mirip dengan yang saya cari.

Gunakan perpustakaan untuk menangani nomor telepon. Libphonenumber oleh Google adalah taruhan terbaik Anda.

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

Saya merekomendasikan untuk menggunakan paket ini dengan seegno.

Saya telah memberikan tautan jsfiddle bagi Anda untuk memformat nomor telepon AS sebagai (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('');
  }
});

Contoh langsung: JSFiddle

coba sesuatu seperti ini ..

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

Pertimbangkan libphonenumber-js ( https://github.com/halt-hammerzeit/libphonenumber-js ) yang merupakan versi kecil dari libphonenumber lengkap dan terkenal.

Contoh cepat dan kotor:

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

(Jika Anda menggunakan regex untuk menghindari pengunduhan perpustakaan, hindari memformat ulang pada backspace / hapus akan mempermudah memperbaiki kesalahan ketik.)

Solusi alternatif:

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

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

Saya menemukan pertanyaan ini saat mencari cara untuk memformat nomor telepon secara otomatis melalui plugin jQuery di Google. Jawaban yang diterima tidak ideal untuk kebutuhan saya dan banyak yang telah terjadi dalam 6 tahun sejak pertama kali diposting. Saya akhirnya menemukan solusinya dan saya mendokumentasikannya di sini untuk anak cucu.

Masalah

Saya ingin kolom input html nomor telepon saya memformat otomatis (menutupi) nilai saat pengguna mengetik.

Larutan

Lihat Cleave.js . Ini adalah cara yang sangat kuat / fleksibel dan mudah untuk memecahkan masalah ini, dan banyak masalah penyembunyian data lainnya.

Memformat nomor telepon semudah:

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

Memasukkan:

4546644645

Kode:

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

Keluaran:

(454)664-4645

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

Keluaran :-( 123) 657-8963

Untuk memperluas kode Cruz Nunez dan menambahkan pemformatan berkelanjutan, plus menyertakan beberapa format nomor telepon internasional.

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

semoga ini bisa membantu

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

Anda akan mendapatkan + 91-123-456-7890