javascript - Format Phone # into 10 DigitsRemove extra characters - Stack Overflow

admin管理员组

文章数量:1304959

I need to have a phone number be formatted on the fly into a 10 digit number - remove ALL spaces, dashes, dots, etc.

EX: (123) 321-1234 / 123-321-1234 bees 1233211234

I've seen examples of doing the opposite, but since I'm new to Javascript, I don't know how to do it.

Ideally, formatting should while the number is being entered into text field, or when a Submit button is pressed.

PS - I only know HTML, so please provide code for both and tags.

Very much appreciate your help!

I need to have a phone number be formatted on the fly into a 10 digit number - remove ALL spaces, dashes, dots, etc.

EX: (123) 321-1234 / 123-321-1234 bees 1233211234

I've seen examples of doing the opposite, but since I'm new to Javascript, I don't know how to do it.

Ideally, formatting should while the number is being entered into text field, or when a Submit button is pressed.

PS - I only know HTML, so please provide code for both and tags.

Very much appreciate your help!

• javascript
• html
• forms
• trim

Share Improve this question Follow asked Jun 27, 2013 at 18:06 user2518394user2518394 1

• 1 Hey Levchik- Wele to Stackoverflow! Usually it's best practice to provide some sort of example of what you've tried. Just saying "please give me code" is kind of frowned upon. We want to be here when you get stuck, not when you want other people to do your work for you. Best of luck! – imjared Commented Jun 27, 2013 at 18:31

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

You can use a regex to remove all non-digits from the textbox's value. Here's an example:

<input type="text" id="text1" />

With this JS:

function addEvent(element, eventName, callback) {
    if (element.addEventListener) {
        element.addEventListener(eventName, callback, false);
    } else if (element.attachEvent) {
        element.attachEvent("on" + eventName, callback);
    }
}

addEvent(window, "load", function () {
    addEvent(document.getElementById("text1"), "change", function () {
        var tel = this.value;
        tel = tel.replace(/\D+/g, "");
        this.value = tel;
    });
});

DEMO: http://jsfiddle/6vC3x/

The replacing happens when the value of the textbox is changed (by user input) and the textbox is blurred (unselected).

The whole addEvent function stuff is just to hopefully reliably add event handlers to an element across browsers consistently.

Just replace all non numeric digits characters with empty string.

("(123) 321-1234").replace(/[^\d]/g, '')

Not the perfect solution but will work. Use split if you need to extract a number before some character appearance like '/' from the string and then using regex \D to remove non-digit characters from a string and then mapped the numbers in a required format in the below example US Tel Format.

`let rawString = "111.222.3333 / need to remove this text (some more text)"

 const formatTelNumber = (phoneNumberString) => {
   let stringWithNumber = phoneNumberString.split("/")[0]
   let cleaned = ("" + stringWithNumber).replace(/\D/g, "")
   let match = cleaned.match(/^(\d{3})(\d{3})(\d{4})$/)
   if (match) {
     return `(${match[1]}) ${match[2]}-${match[3]}`
   }
   return null;
};
console.log(formatTelNumber(rawString))`

Cheers! JK

本文标签： javascriptFormat Phoneinto 10 DigitsRemove extra charactersStack Overflow