Cara memformat nomor telepon dengan jQuery

93

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>
javascript  jquery 
— Xtian
sumber
1
Jawaban Terlambat, tetapi hanya untuk bantuan mereka yang mendarat di halaman ini URL: igorescobar.github.io/jQuery-Mask-Plugin
— Senthil
5
Tidak yakin saya memahami status tertutup yang satu ini. Tidak Konstruktif sepertinya tidak benar ... Saya menemukan informasi ini sangat berguna dan terkait langsung dengan masalah yang membawa saya ke sini. Saya tidak membantah fakta bahwa itu ditutup, tetapi alasan yang ditampilkan untuk ditutup
— Brett Weber
Mungkin pertanyaan itu telah diedit dan kurang deskriptif sebelumnya ... sepertinya pertanyaan dan jawaban SO yang benar-benar valid bagi saya, dan banyak suara positif.
— Kevin Nelson
1
Perpustakaan Google github.com/googlei18n/libphonenumber tidak diperlukan jQuery.
— nu everest

Jawaban:

217

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 ().

— andlrc
sumber
4
Saya telah memodifikasi ini untuk mendukung acara 'perubahan' dalam bidang masukan. jsfiddle.net/gUsUK
— Zach Shallbetter
3
Regex yang sedikit lebih kuat (meskipun memerlukan fungsi ganti kustom) /(\d{3})?(\d{3})(\d{4})$/jika tidak ada kode area
— RevanProdigalKnight
Apakah valid untuk nomor telepon di seluruh dunia?
— RamPrasadBismil
Jika Anda memiliki beberapa nomor telepon di halaman, pertimbangkan untuk menggunakan fungsi $ (selector) .each () untuk dengan mudah menerapkan mask ini ke semua nomor.
— Daniel Siebert
Saya ingin menerapkannya dengan menekan tombol dan acara blur. Ini bukan memformat nomor telepon jika digit kurang dari 10. Kode sampelnya adalah: $('#x_phone').on('keypress blur',function() { var ph = $(this).val(); var temp = ph.replace(/(\d{3})(\d{3})(\d{4})/, '$1-$2-$3'); $(this).val(temp); //alert(temp); });
— Musaddiq Khan
54 
var phone = '2124771000',
    formatted = phone.substr(0, 3) + '-' + phone.substr(3, 3) + '-' + phone.substr(6,4)
— Marc B
sumber
7
@AndreasAL: Karena mesin regex memiliki overhead yang berat, terutama untuk sesuatu yang format inputnya diketahui dan operasi string sederhana JAUH lebih efisien. Dan tentu saja, ada aturan bahwa menggunakan regex untuk suatu masalah hanya membuat Anda memiliki dua masalah.
— Marc B
4
Solusi ini juga memformat nomor telepon dengan huruf di dalamnya, seperti "212555IDEA".
— Jason Whitehorn
1
ini berfungsi dengan baik di lingkungan windows tetapi tidak berfungsi di perangkat iOS. apakah ada alternatif yang berfungsi di kedua platform
— Purushotam Sharma
12

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;
});
— Trenton Bost
sumber
8

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.

— Cruz Nunez
sumber
5

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.

— aloisdg pindah ke codidact.com
sumber
4

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

— Kapilrc
sumber
Bagaimana saya bisa mengubah pola ini untuk menampilkan nomor dari kiri ke kanan seperti ==> (021) 88888888
— Mostafa
3

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
    }
  }
});
— Anuj Patel
sumber
2

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.)

— Adam Lane
sumber
2

Solusi alternatif:

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

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

— Penny Liu
sumber
1

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'
});
— Tod Birdsall
sumber
1

Memasukkan:

4546644645

Kode:

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

Keluaran:

(454)664-4645
— Sushant
sumber
0 
 $(".phoneString").text(function(i, text) {
            text = text.replace(/(\d{3})(\d{3})(\d{4})/, "($1) $2-$3");
            return text;
        });

Keluaran :-( 123) 657-8963

— nirali
sumber
-1

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);
    });
— Valik Rudd
sumber
-2

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

— pengguna6560624
sumber
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.