Question

We’d like to allow several different formats for people to paste email addresses into our app, those being:

1. [e-mail]
2. "Foo Bar" <[e-mail]>
3. Foo Bar <[e-mail]>

Is there a good Javascript regular expression which can take any one of those 3 and give the email address, as well as the leading name if it exists? These seem to be the format users are copy/pasting into the app currently (we’re only supporting the first right now).

Answer 1

I think I might have got something! It can definitely be improved, but give me a moment to defend it before you start suggesting changes. Here’s the regex:

/^(?:("{0,1})(\w+ \w+)\1 <([^@ ]+@[^@ ]+\.[^@. ]+)>|([^@ ]+@[^@ ]+\.[^@. ]+))$/

Let me explain what it does. The first ^(?: says that the text must start at the beginning of the field and that the next group will not be captured in a backreference. We then start an optional item. This must be done since we want to require either 0 or 2 ", and 0 or 2 < marks. The first part of the optional item (before the | bar) deals with cases 2 and 3.

Cases 2 and 3:

The ("{0,1}) captures whether or not there is a quotation mark at the beginning. Then we use the(\w+ \w+) to require a first name and a second name, separated by a space, in cases 2 and 3. The parentheses around them capture them into a backreference so that you can get the value of the name later. Then comes the \1 – this is the backreference from the quotation marks earlier. It says that if you used quotation marks at the beginning of the name, you must use them at the end of the name too. Next up, the < says that the email address in cases 2 and 3 must be separated by a space from the name or ending quotation mark and must begin with a less-than sign. Finally, we have the regex for the email! This is the same for all cases. It is surrounded by parentheses to create a backreference. The [^@ ]+@ ensures that it must not have an @ symbol or space before the actual @ symbol. The following [^@ ]+\. does the same with the period after the @ symbol, and the trailing [^@. ]+ ensures the same is true after the period. We then have a closing parenthesis to end the backreference to the email address, and a > symbol because this is still for cases 2 and 3, which require one.

Case 1:

We then get to the | pipe, which specifies that we’ve gotten to the other option in the regex. If the format of the text did not match the opening conditions for cases 2 and 3, the regex checks to see if it’s just a plain email address (case 1). The regex here is the same as the one inbetween the <> symbols in cases 2 and 3 – it matches a valid email address and creates a backreference.

Valid formats:

Here’s an incomplete list of formats that work:

[e-mail]
[e-mail]
[e-mail]
Foo Bar <[e-mail]>
"Foo Bar" <[e-mail]>
foo bar <[e-mail]>
"foo bar" <[e-mail]>

---

WORKING DEMO