JavaScript String split method delimiter

Question

For an assignment, I'm trying to split a phone number in the following format: (555) 555-5555 into 2 pieces. The first is the Area code which should display "555" and the second is the remaining number which should display "555-5555".

I've managed to get answers to display almost perfectly, except the area code displays as "(555)" instead of "555" which is what I need.

How do I make the delimiter look for the numbers in between the parenthesis?

Here's my current code:

function splitButtonPressed()
{
   var inputString = document.getElementById( "inputField" ).value; //Input field for numbers
   var tokens1 = inputString.split( " " ); 


   document.getElementById("areaOutput").value = tokens1[0]; 

   document.getElementById("numberOutput").value = tokens1[1];
}

EDIT: I've got it to work, Thank You all for your help.

Answer 1

If you don't have to use .split() to solve this problem and you want to allow a bunch of different delimiters for the area code, I'd probably do this using a regular expression:

var phoneStr = "(123) 456-7890";
var match = phoneStr.match(/\s*\(?(\d+)[)\-\s]\s*(\d+)[\s*\-](\d+)/);

// areaCode = match[1];
// prefix = match[2];
// num = match[3];​

Here's a test app that shows it working on a bunch of different phone numbers: http://jsfiddle.net/jfriend00/L87rE/

Here's how the regex works:

Any amount of whitespace  \s*
An optional left paren    \(?
A series of digits (captured for match[1])   (\d+)
Any one of several delimiters a right paren, a dash or whitespace  [)\-\s]
Any amount of whitespace   \s*
A series of digits (captured for match[2])   (\d+)
Whitespace or dash as a delimiter   [\s*\-]
A series of digits (captured for match[3])   (\d+)/

Answer 2

Change

document.getElementById("areaOutput").value = tokens1[0];

to

document.getElementById("areaOutput").value = tokens1[0].substr(1, 3);

What the above code does is grabs a substring from tokens1[0] starting at the first character in the string and grabbing the three characters after that (5, 5, and 5).

Answer 3

Here's one using a single .split() that works on a flexible phone number format like these:

"(123) 456-7890",
"123-456-7890",
" (123)456-7890",
" 123 456 7890"

var phoneStr = "(123) 456-7890";
// precondition the phone number by removing parens and trimming extra whitespace
var str = phoneStr.replace(/[\(\)]/g, " ").replace(/^\s*|\s*$/g, "");
// split on either a dash or whitespace
var parts = str.split(/-|\s+/);
// areacode == parts[0]
// prefix == parts[1]
// num == parts[2]

Test cases here: http://jsfiddle.net/jfriend00/UUgXM/

To make the .split() operation generate consistent results with varying formats, it uses a couple .replace() operations to precondition the input before the .split() .

This uses a regex with the .split() so a single split can split on more than one thing.

Answer 4

我建议使用match() ：

document.getElementById("areaOutput").value = tokens1[0].match(/\d+/);