Javascript dashes in phone number

Question

I tried to research the answer to this question but I'm lost. I am trying to make a one search bar that automatically puts a dash in the phone number. I've solved that.

The next part is the challenging part. How can I make it always do XXX-XXX-XXXX, even if the characters pasted were something like 555 555 1212 or 555---555-1212, where it will only reel back the number and output with 555-555-1212. It shouldn't count the spaces or extra dashes as a character.

I found: http://www.jotform.com/answers/15202-can-I-add-script-to-my-form-that-will-automatically-add-hyphens-in-between-the-3-digit-area-code-and-also-the-3-digit-prefix

I changed it just a bit by adding:

<SCRIPT LANGUAGE="JavaScript">
        function addDashes(f)
            {
                f.value = f.value.slice(0,3)+"-"+f.value.slice(3,6)+"-"+f.value.slice(6,15);
            }
    </SCRIPT>


<input id="input_4" class="form-textbox" maxlength="15" name="atn" size="25" onBlur='addDashes(this)' />

Right now, this works only if the user puts 5555555555 and automatically turns it into 555-555-5555. I'm trying to figure out how to take something like 5-55555-5555 and turn it into 555-555-5555. Currently, it makes it 5-5-555-5-5555.

See my dilemma? lol. It can't be php or any server side scripting as this must be able to run on a desktop.

---

Resolution:

<SCRIPT LANGUAGE="JavaScript">
        function addDashes(f)
            {
                f.value = f.value.replace(/\D/g, '');

                f.value = f.value.slice(0,3)+"-"+f.value.slice(3,6)+"-"+f.value.slice(6,15);
            }
    </SCRIPT>

Answer 1

First, clean your input by deleting all chars that are not numbers (ref.: Regex to replace everything except numbers and a decimal point)

Then, you put your dashes.

function addDashes(f)
{
    f_val = f.value.replace(/\D[^\.]/g, "");
    f.value = f_val.slice(0,3)+"-"+f_val.slice(3,6)+"-"+f_val.slice(6);
}

Answer 2

I have a strong tendency to treat phone numbers as a straight string of 10 digits with no formatting (so I can apply formatting to them on-the-fly, as needed and so searching and comparison is simpler), although that may change if I ever have to deal with international phone numbers. If all you're dealing with is US phone numbers, this will work nicely (formats it as it's typed):

function addDashes(f) {
    var r = /(\D+)/g,
        npa = '',
        nxx = '',
        last4 = '';
    f.value = f.value.replace(r, '');
    npa = f.value.substr(0, 3);
    nxx = f.value.substr(3, 3);
    last4 = f.value.substr(6, 4);
    f.value = npa + '-' + nxx + '-' + last4;
}​

Here's a fiddle: http://jsfiddle.net/EYuk5/

Answer 3

transform with string method replace

let phone = '0884332212'.replace(/^(\d{3})(\d{3})(\d{4})/, '$1-$2-$3')
console.log(phone)
// => 088-433-2212

Answer 4

I did this

function addDashesToNumber(number){
    const numWithoutDashes = number.replace(/[^0-9]/g, '')
    if(numWithoutDashes.length > 10) return number.slice(0, -1)
    const dashPlaces = [3, 6]
    return numWithoutDashes
                .split('')
                .reduce((acc, curr, i) => dashPlaces.includes(i) ? [...acc, '-', curr] : [...acc, curr], [])
                .join('')
}

Answer 5

Try this:

  function dashedNumber(value){
    const afterIndices = [3,6,8]; 
    const length = value.length;
    let newValue = '' 
    for(let i=0; i<length; i++){
      if(afterIndices.includes(i))
        newValue+='-'
      newValue+=value[i];
    }
    return newValue;
  }

Answer 6

Here's a fiddle: https://jsfiddle.net/v9gq5jkw/.

<input id="phone">

function phone_formatting(ele, restore) {
  var new_number,
    selection_start = ele.selectionStart,
    selection_end = ele.selectionEnd,
    number = ele.value.replace(/\D/g, '');

  if (number.length > 2) {
    new_number = number.substring(0, 3) + '-';
    if (number.length === 4 || number.length === 5) {
      new_number += number.substr(3);
    } else if (number.length > 5) {
      new_number += number.substring(3, 6) + '-';
    }
    if (number.length > 6) {
      new_number += number.substring(6);
    }
  } else {
    new_number = number;
  }

  ele.value = (new_number.length > 12) ? new_number.substring(0, 12) : new_number;

  if (new_number.slice(-1) === '-' && restore === false &&
    (new_number.length === 8 && selection_end === 7) ||
    (new_number.length === 4 && selection_end === 3)) {
    selection_start = new_number.length;
    selection_end = new_number.length;
  } else if (restore === 'revert') {
    selection_start--;
    selection_end--;
  }
  ele.setSelectionRange(selection_start, selection_end);

}

function phone_number_check(field, e) {
  var key_code = e.keyCode,
    key_string = String.fromCharCode(key_code),
    press_delete = false,
    dash_key = 189,
    delete_key = [8, 46],
    direction_key = [33, 34, 35, 36, 37, 38, 39, 40],
    selection_end = field.selectionEnd;

  if (delete_key.indexOf(key_code) > -1) {
    press_delete = true;
  }

  if (key_string.match(/^\d+$/) || press_delete) {
    phone_formatting(field, press_delete);
  } else if (direction_key.indexOf(key_code) > -1) {} else if (dash_key === key_code) {
    if (selection_end === field.value.length) {
      field.value = field.value.slice(0, -1)
    } else {
      field.value = field.value.substring(0, (selection_end - 1)) + field.value.substr(selection_end)
      field.selectionEnd = selection_end - 1;
    }
  } else {
    e.preventDefault();
    phone_formatting(field, 'revert');
  }

}

document.getElementById('phone').onkeyup = function(e) {
  phone_number_check(this, e);
}

Answer 7

Beside adding dashes, you will need to deal with the position of the cursor, especially in case of deletion.

This AMD module does exactly that: https://github.com/whenyoubelieve2014/us-telephone-input