JQuery के साथ एक फोन नंबर को कैसे प्रारूपित करें

Question

मैं वर्तमान में जैसे फ़ोन नंबर प्रदर्शित कर रहा हूं 2124771000। हालाँकि, मुझे संख्या को अधिक मानव-पठनीय रूप में स्वरूपित करने की आवश्यकता है, उदाहरण के लिए 212-477-1000:। यहाँ मेरा वर्तमान है HTML:

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

Comments

बहुत देर से जवाब, लेकिन इस पृष्ठ URL पर उतरने वालों की मदद के लिए: igorescobar.github.io/jQuery-Mask-Plugin

— Senthil

यकीन नहीं होता कि मैं इस पर बंद स्थिति को समझता हूं। कंस्ट्रक्टिव सही नहीं लगता है ... मुझे यह जानकारी बेहद उपयोगी लगती है और इस मुद्दे से एक सीधा जुड़ाव है जो मुझे यहां लाया है। मैं इस तथ्य से नहीं लड़ता कि यह बंद है, लेकिन बंद होने के लिए प्रदर्शित कारण

— ब्रेट वेबर

शायद प्रश्न संपादित हो गया था और पहले कम वर्णनात्मक था ... यह एक पूरी तरह से वैध एसओ प्रश्न और मेरे लिए उत्तर की तरह लगता है, और बहुत सारे अपवोट।

— केविन नेल्सन

Googles पुस्तकालय github.com/googlei18n/libphonenumber कोई jQuery की आवश्यकता नहीं है।

— nu सदाबहार

Answer 1

सरल: 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 () विधि का उपयोग करें।

Comments

मैंने इनपुट फ़ील्ड में 'परिवर्तन' की घटनाओं का समर्थन करने के लिए इसे संशोधित किया है। jsfiddle.net/gUsUK

— Zach Shallbetter

रेगेक्स का थोड़ा और अधिक मजबूत (हालांकि इसके लिए कस्टम /(\d{3})?(\d{3})(\d{4})$/

— रीप्लेस

क्या यह पूरी दुनिया में फोन नंबरों के लिए मान्य है?

— रामप्रसाद बिस्मिल

यदि आपके पास पृष्ठ पर कई फ़ोन नंबर हैं, तो $ (चयनकर्ता) .each () फ़ंक्शन का उपयोग करने पर विचार करें ताकि सभी नंबरों पर इस मास्क को आसानी से लागू किया जा सके।

— डैनियल सीबर्ट

मैं इसे कीपर और ब्लर इवेंट के साथ लागू करना चाहता हूं। अंकों से कम होने पर यह फोन नंबर को प्रारूपित नहीं करता है। नमूना कोड है: $('#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); });

— मुसद्दीक खान

Answer 2

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

Comments

@AndreasAL: क्योंकि एक रेगेक्स इंजन में भारी ओवरहेड होता है, विशेष रूप से कुछ के लिए जहां इनपुट प्रारूप ज्ञात है और सरल स्ट्रिंग संचालन एफएआर अधिक कुशल हैं। और हां, यह नियम है कि किसी समस्या के लिए regex का उपयोग करने से आपको दो समस्याएं होती हैं।

— मार्क बी

यह समाधान उन अक्षरों के साथ फोन नंबर को भी ठीक से प्रारूपित करता है, जैसे "212555IDEA"।

— जेसन व्हाइटहॉर्न

यह विंडोज़ वातावरण में अच्छा काम कर रहा है लेकिन iOS डिवाइस में काम नहीं कर रहा है। क्या कोई विकल्प है जो दोनों मंच में काम करता है

— पुरुषोत्तम शर्मा

Answer 3

यह सुनिश्चित करना न भूलें कि आप पूरी तरह पूर्णांक के साथ काम कर रहे हैं।

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

Answer 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(/(\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

मुझे पता है कि यह सीधे सवाल का जवाब नहीं देता है, लेकिन जब मैं जवाब देख रहा था तो यह मेरे द्वारा देखे गए पहले पृष्ठों में से एक था। तो यह जवाब किसी के लिए भी है जो मैं खोज रहा था उसी तरह की खोज कर रहा है।

Answer 5

फोन नंबर को संभालने के लिए एक पुस्तकालय का उपयोग करें। Google द्वारा 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));
// => [phone]

मैं इस पैकेज को सीग्नो द्वारा उपयोग करने की सलाह देता हूं।

Answer 6

मैंने आपको (XXX) XXX-XXX के रूप में यूएस फ़ोन नंबरों को प्रारूपित करने के लिए 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

Comments

जैसे == बाएं से दाएं मैं कैसे इस पैटर्न संख्या दिखाने के लिए बदल सकते हैं> [phone]

— मुस्तफा

Answer 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]\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
    }
  }
});

Answer 8

लिबफोनेनंबर-जेएस पर विचार करें ( https://github.com/halt-hammerzeit/libphonenumber-js ) जो पूर्ण और प्रसिद्ध लिम्फोनेम्बर का एक छोटा संस्करण है।

त्वरित और गंदे उदाहरण:

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

(यदि आप लाइब्रेरी डाउनलोड से बचने के लिए रेगेक्स का उपयोग करते हैं, तो बैकस्पेस / डिलीट पर रिफॉर्मैट से बचें। यह एंडोस को सही करने में आसान बना देगा।)

Answer 9

एक वैकल्पिक समाधान:

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

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

Answer 10

एक jQuery प्लगइन के माध्यम से ऑटो-फॉर्म फोन नंबरों के लिए रास्ता तय करते समय मुझे यह सवाल मिला। स्वीकृत उत्तर मेरी आवश्यकताओं के लिए आदर्श नहीं था और मूल रूप से पोस्ट किए जाने के बाद से 6 वर्षों में बहुत कुछ हुआ है। मुझे अंततः समाधान मिल गया और मैं इसे यहां पोस्टीरिटी के लिए प्रलेखित कर रहा हूं।

संकट

मैं अपने फ़ोन नंबर html इनपुट फ़ील्ड को उपयोगकर्ता के प्रकारों के रूप में ऑटो-फॉर्मेट (मास्क) मान देना चाहूंगा।

उपाय

Cleave.js की जाँच करें । यह इस समस्या को हल करने के लिए एक बहुत शक्तिशाली / लचीला और आसान तरीका है, और कई अन्य डेटा मास्किंग मुद्दे हैं।

फ़ोन नंबर फ़ॉर्मेट करना उतना ही आसान है:

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

Answer 11

इनपुट:

4546644645

कोड:

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

आउटपुट:

[phone]

Answer 12

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

आउटपुट :-( 123) 657-8963

Answer 13

हो सकता है यह मदद करेगा

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 मिलेगा