So formatieren Sie eine Telefonnummer mit jQuery

Ich zeige derzeit Telefonnummern wie 2124771000. Ich muss die Nummer jedoch in einer besser lesbaren Form formatieren, zum Beispiel : 212-477-1000. Hier ist meine aktuelle HTML:

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

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

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

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

Hinweis: Die Methode .text () kann nicht für Eingabeelemente verwendet werden. Verwenden Sie für Eingabefeldtext die Methode .val ().

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

Vergessen Sie nicht sicherzustellen, dass Sie mit reinen ganzen Zahlen arbeiten.

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

Hier ist eine Kombination einiger dieser Antworten. Dies kann für Eingabefelder verwendet werden. Beschäftigt sich mit 7- und 10-stelligen Telefonnummern.

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

Live-Beispiel: JSFiddle

Ich weiß, dass dies die Frage nicht direkt beantwortet, aber als ich nach Antworten suchte, war dies eine der ersten Seiten, die ich fand. Diese Antwort ist also für alle, die nach etwas suchen, das dem ähnelt, wonach ich gesucht habe.

Verwenden Sie eine Bibliothek, um die Telefonnummer zu verarbeiten. Die Telefonnummer von Google ist die beste Wahl .

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

Ich empfehle dieses Paket von seegno zu verwenden.

Ich habe einen jsfiddle-Link bereitgestellt, mit dem Sie US-Telefonnummern als (XXX) XXX-XXX formatieren können

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

Live-Beispiel: JSFiddle

versuchen Sie so etwas ..

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

Betrachten Sie libphonenumber-js ( https://github.com/halt-hammerzeit/libphonenumber-js ), eine kleinere Version der vollständigen und berühmten libphonenumber.

Schnelles und schmutziges Beispiel:

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

(Wenn Sie einen regulären Ausdruck verwenden, um einen Bibliotheksdownload zu vermeiden, vermeiden Sie eine Neuformatierung bei Rücktaste / Löschen, um Tippfehler zu korrigieren.)

Eine alternative Lösung:

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

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

Ich habe diese Frage gefunden, als ich nach einer Möglichkeit gegoogelt habe, Telefonnummern über ein jQuery-Plugin automatisch zu formatieren. Die akzeptierte Antwort war nicht ideal für meine Bedürfnisse und in den 6 Jahren seit ihrer Veröffentlichung wurde viel passiert. Ich habe schließlich die Lösung gefunden und dokumentiere sie hier für die Nachwelt.

Problem

Ich möchte, dass mein HTML-Eingabefeld für die Telefonnummer den Wert automatisch formatiert (maskiert), während der Benutzer ihn eingibt.

Lösung

Schauen Sie sich Cleave.js an . Es ist eine sehr leistungsfähige / flexible und einfache Möglichkeit, dieses Problem und viele andere Datenmaskierungsprobleme zu lösen.

Das Formatieren einer Telefonnummer ist so einfach wie:

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

Eingang:

4546644645

Code:

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

Ausgabe:

(454)664-4645

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

Ausgabe :-( 123) 657-8963

Vielleicht hilft das

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

Sie erhalten + 91-123-456-7890