在 Javascript 中重新格式化美國電話號碼的正則表達式

Question

我正在尋找重新格式化（替換，而不是驗證 - 有許多用於驗證的參考）電話號碼以顯示在 Javascript 中。 以下是一些數據的示例：

• 123 4567890
• (123) 456-7890
• (123)456-7890
• 123 456 7890
• 123.456.7890
• （空白/空）
• 1234567890

有沒有一種簡單的方法可以使用正則表達式來做到這一點？ 我正在尋找最好的方法來做到這一點。 有沒有更好的辦法？

我想將號碼重新格式化為以下格式： (123) 456-7890

Answer 1

假設您想要格式“ (123) 456-7890 ”：

function formatPhoneNumber(phoneNumberString) {
  var cleaned = ('' + phoneNumberString).replace(/\D/g, '');
  var match = cleaned.match(/^(\d{3})(\d{3})(\d{4})$/);
  if (match) {
    return '(' + match[1] + ') ' + match[2] + '-' + match[3];
  }
  return null;
}

這是一個允許可選的+1國際代碼的版本：

function formatPhoneNumber(phoneNumberString) {
  var cleaned = ('' + phoneNumberString).replace(/\D/g, '');
  var match = cleaned.match(/^(1|)?(\d{3})(\d{3})(\d{4})$/);
  if (match) {
    var intlCode = (match[1] ? '+1 ' : '');
    return [intlCode, '(', match[2], ') ', match[3], '-', match[4]].join('');
  }
  return null;
}
formatPhoneNumber('+12345678900') // => "+1 (234) 567-8900"
formatPhoneNumber('2345678900')   // => "(234) 567-8900"

Answer 2

可能的解決方案：

function normalize(phone) {
    //normalize string and remove all unnecessary characters
    phone = phone.replace(/[^\d]/g, "");

    //check if number length equals to 10
    if (phone.length == 10) {
        //reformat and return phone number
        return phone.replace(/(\d{3})(\d{3})(\d{4})/, "($1) $2-$3");
    }

    return null;
}

var phone = '(123)4567890';
phone = normalize(phone); //(123) 456-7890

Answer 3

 var x = '301.474.4062'; x = x.replace(/\\D+/g, '') .replace(/(\\d{3})(\\d{3})(\\d{4})/, '($1) $2-$3'); alert(x);

Answer 4

這個答案借用了 maerics 的答案。 它的主要區別在於它接受部分輸入的電話號碼並格式化已輸入的部分。

phone = value.replace(/\D/g, '');
const match = phone.match(/^(\d{1,3})(\d{0,3})(\d{0,4})$/);
if (match) {
  phone = `${match[1]}${match[2] ? ' ' : ''}${match[2]}${match[3] ? '-' : ''}${match[3]}`;
}
return phone

Answer 5

我正在使用此函數來格式化美國數字。

function formatUsPhone(phone) {

    var phoneTest = new RegExp(/^((\+1)|1)? ?\(?(\d{3})\)?[ .-]?(\d{3})[ .-]?(\d{4})( ?(ext\.? ?|x)(\d*))?$/);

    phone = phone.trim();
    var results = phoneTest.exec(phone);
    if (results !== null && results.length > 8) {

        return "(" + results[3] + ") " + results[4] + "-" + results[5] + (typeof results[8] !== "undefined" ? " x" + results[8] : "");

    }
    else {
         return phone;
    }
}

它接受幾乎所有可以想象的寫美國電話號碼的方式。 結果被格式化為 (987) 654-3210 x123 的標准格式

Answer 6

倒退思考

僅取最后一位數字（最多 10 位）而忽略第一個“1”。

function formatUSNumber(entry = '') {
  const match = entry
    .replace(/\D+/g, '').replace(/^1/, '')
    .match(/([^\d]*\d[^\d]*){1,10}$/)[0]
  const part1 = match.length > 2 ? `(${match.substring(0,3)})` : match
  const part2 = match.length > 3 ? ` ${match.substring(3, 6)}` : ''
  const part3 = match.length > 6 ? `-${match.substring(6, 10)}` : ''    
  return `${part1}${part2}${part3}`
}

鍵入時的示例輸入/輸出

formatUSNumber('+1333')
// (333)

formatUSNumber('333')
// (333)

formatUSNumber('333444')
// (333) 444

formatUSNumber('3334445555')
// (333) 444-5555

Answer 7

我已經擴展了David Baucum 的答案，以支持最多 4 位數字的擴展。 它還包括原始問題中要求的括號。 當您在字段中鍵入時，此格式將起作用。

phone = phone.replace(/\D/g, '');
const match = phone.match(/^(\d{1,3})(\d{0,3})(\d{0,4})(\d{0,4})$/);
if (match) {
    phone = `(${match[1]}${match[2] ? ') ' : ''}${match[2]}${match[3] ? '-' : ''}${match[3]}${match[4] ? ' x' : ''}${match[4]}`;
}
return phone;

Answer 8

這是一個同時接受電話號碼和帶分機號碼的電話號碼。

function phoneNumber(tel) {
var toString = String(tel),
    phoneNumber = toString.replace(/[^0-9]/g, ""),
    countArrayStr = phoneNumber.split(""),
    numberVar = countArrayStr.length,
    closeStr = countArrayStr.join("");
if (numberVar == 10) {
    var phone = closeStr.replace(/(\d{3})(\d{3})(\d{4})/, "$1.$2.$3"); // Change number symbols here for numbers 10 digits in length. Just change the periods to what ever is needed.
} else if (numberVar > 10) {
    var howMany = closeStr.length,
        subtract = (10 - howMany),
        phoneBeginning = closeStr.slice(0, subtract),
        phoneExtention = closeStr.slice(subtract),
        disX = "x", // Change the extension symbol here
        phoneBeginningReplace = phoneBeginning.replace(/(\d{3})(\d{3})(\d{4})/, "$1.$2.$3"), // Change number symbols here for numbers greater than 10 digits in length. Just change the periods and to what ever is needed. 
        array = [phoneBeginningReplace, disX, phoneExtention],
        afterarray = array.splice(1, 0, " "),
        phone = array.join("");

} else {
    var phone = "invalid number US number";
}
return phone;
}

phoneNumber("1234567891"); // Your phone number here

Answer 9

當用戶嘗試在分隔符上退格時，尤其是從字符串的中間退格時，幾乎所有這些都會出現問題。

這是一個處理該問題的 jquery 解決方案，並確保在您編輯時光標停留在正確的位置：

//format text input as phone number (nnn) nnn-nnnn
$('.myPhoneField').on('input', function (e){
    var $phoneField = e.target;
    var cursorPosition = $phoneField.selectionStart;
    var numericString = $phoneField.value.replace(/\D/g, '').substring(0, 10);

    // let user backspace over the '-'
    if (cursorPosition === 9 && numericString.length > 6) return;

    // let user backspace over the ') '
    if (cursorPosition === 5 && numericString.length > 3) return;
    if (cursorPosition === 4 && numericString.length > 3) return;

    var match = numericString.match(/^(\d{1,3})(\d{0,3})(\d{0,4})$/);
    if (match) {
        var newVal = '(' + match[1];
        newVal += match[2] ? ') ' + match[2] : '';
        newVal += match[3] ? '-' + match[3] : '';

        // to help us put the cursor back in the right place
        var delta = newVal.length - Math.min($phoneField.value.length, 14);      
        $phoneField.value = newVal;
        $phoneField.selectionEnd = cursorPosition + delta;
    } else {
        $phoneField.value = '';        
    }
})

Answer 10

2021年

libphonenumber-js

例子

import parsePhoneNumber from 'libphonenumber-js'

const phoneNumber = parsePhoneNumber('+12133734253')

phoneNumber.formatInternational() === '+1 213 373 4253'
phoneNumber.formatNational() === '(213) 373-4253'
phoneNumber.getURI() === 'tel:+12133734253'

Answer 11

var numbers = "(123) 456-7890".replace(/[^\d]/g, ""); //This strips all characters that aren't digits
if (numbers.length != 10) //wrong format
    //handle error
var phone = "(" + numbers.substr(0, 3) + ") " + numbers.substr(3, 3) + "-" + numbers.substr(6); //Create format with substrings

Answer 12

您可以使用此功能來檢查有效的電話號碼並將其標准化：

let formatPhone = (dirtyNumber) => {
 return dirtyNumber.replace(/\D+/g, '').replace(/(\d{3})(\d{3})(\d{4})/, '($1) $2-$3');
}

let isPhone = (phone) => {
   //normalize string and remove all unnecessary characters
   phone = phone.replace(/\D+/g, '');
   return phone.length == 10? true : false;
}

Answer 13

上述解決方案是優越的，特別是如果使用 Java，並且遇到更多的超過 10 位數字的號碼，例如國際代碼前綴或附加分機號碼。 這個解決方案是基本的（我是正則表達式世界的初學者）並且在設計時考慮到了美國電話號碼，並且僅適用於只有 10 個數字且可能帶有一些格式字符，或者可能根本沒有格式字符（只有 10 個數字）的字符串）。 因此，我只建議將此解決方案用於半自動應用程序。 我個人更喜歡將數字存儲為不帶格式字符的 10 個數字，但也希望能夠將電話號碼轉換或清理為標准格式，普通人和應用程序/手機可以隨意立即識別。

我遇到了這篇文章，尋找可以與具有 PCRE 正則表達式功能（但沒有 Java 功能）的文本清理器應用程序一起使用的內容。 我將在此處為那些可以使用簡單的純正則表達式解決方案的人發布這篇文章，該解決方案可以在各種文本編輯器、清理器、擴展器甚至一些剪貼板管理器中工作。 我個人使用 Sublime 和 TextSoap。 此解決方案是為 Text Soap 制作的，因為它位於菜單欄中，並提供了一個下拉菜單，您可以在其中觸發對光標選擇的內容或剪貼板中的內容的文本操作操作。

我的方法本質上是兩個替換/搜索和替換正則表達式。 每次替換搜索和替換都涉及兩個正則表達式，一個用於搜索，一個用於替換。

替換/搜索和替換 #1

• 第一次替換/搜索和替換將非數字數字從其他 10 位數字剝離為 10 位字符串。

第一個替換/搜索正則表達式： \\D

• 此搜索字符串匹配所有非數字字符。

第一次替換/替換正則表達式：“”（什么都沒有，甚至沒有空格）

• 將替換字段完全留空，不應存在包括空格在內的空白區域。 這將導致所有匹配的非數字字符被刪除。 您應該在此操作之前輸入 10 位數字 + 格式字符，然后輸出 10 位數字 sans 格式字符。

替換/搜索和替換 #2

• 操作的第二個替換/搜索和替換搜索部分捕獲區號$1的組，第二組三個數字$2的捕獲組，以及最后一組四個數字$3的最后一個捕獲組。 操作替代部分的正則表達式在捕獲的數字組之間插入美國電話號碼格式。

第二次替換/搜索正則表達式： (\\d{3})(\\d{3})(\\d{4})

第二次替換/替換正則表達式： \\($1\\) $2\\-$3

• 反斜杠\\轉義特殊字符( , ) ， (<-whitespace) 和-因為我們將它們插入到捕獲組$1 、 $2和$3捕獲的號碼之間， $2用於美國電話號碼格式化。

• 在 TextSoap 中，我創建了一個自定義清理器，其中包含兩個替換操作操作，因此在實踐中感覺與執行腳本相同。 我確信這個解決方案可以改進，但我預計復雜性會增加很多。 如果有人想添加此解決方案，歡迎將此解決方案的改進版本作為學習經驗。

Answer 14

基於 David Baucum 的回答——這里有一個版本，它試圖在 React onChange 事件處理程序中“在你輸入時”改進自動替換：

function formatPhoneNumber(phoneNumber) {
  const cleanNum = phoneNumber.toString().replace(/\D/g, '');
  const match = cleanNum.match(/^(\d{3})(\d{0,3})(\d{0,4})$/);
  if (match) {
    return '(' + match[1] + ') ' + (match[2] ? match[2] + "-" : "") + match[3];
  }
  return cleanNum;
}

//...

onChange={e => setPhoneNum(formatPhoneNumber(e.target.value))}

只要有 3 個數字，它就會插入 (###) 然后它會繼續跟隨 RegEx 直到它看起來像這樣 (###) ###-####

Answer 15

對於美國電話號碼

/^\(?(\d{3})\)?[- ]?(\d{3})[- ]?(\d{4})$/

讓我們把這個正則表達式分成更小的片段，以便於理解。

• /^\\(? : 表示電話號碼可能以可選的( .
• (\\d{3}) : 可選后(必須有 3 個數字。如果電話號碼沒有( ，則必須以 3 個數字開頭。例如(308或308 .
• \\)? : 表示電話號碼的前 3 位數字后可以有一個可選的) 。
• [- ]? ：接下來的電話號碼可以具有可選連字號（ -之后) ，如果存在或后前3位數字。
• (\\d{3}) ：那么必須還有 3 個數字。 例如(308)-135或308-135或308135
• [- ]? ：在第二組 3 位數字之后，電話號碼可以有另一個可選的連字符 ( - )。 例如(308)-135-或308-135-或308135-

• (\\d{4})$/ ：最后，電話號碼必須以四位數字結尾。 例如(308)-135-7895或308-135-7895或308135-7895或3081357895 。

  參考 ：

http://www.zparacha.com/phone_number_regex/