Extract the Name from an Email Address in JavaScript

# Extract the Name from an Email Address in JavaScript

To extract the name from an email address:

1. Use the split() method to split the email on the @ symbol.
2. Access the first array element.
3. The first element in the array stores the name.

Copied!
const email = 'bobbyhadz@email.com';

const result = email.split('@')[0];
console.log(result); // 👉️ "bobbyhadz"

The String.split() method takes a separator and splits the string into an array on each occurrence of the provided delimiter.

The String.split() method takes the following 2 parameters:

We split the string on the @ symbol.

Copied!
const email = 'bobbyhadz@email.com';

// 👇️ [ 'bobbyhadz', 'email.com' ]
console.log(email.split('@'));

// 👇️ bobbyhadz
console.log(email.split('@')[0]);

The first string in the array contains the username which we can access using an index of 0.

If you have to do this often, define a reusable function.

Copied!
function extractNameFromEmail(email) {
  return email.split('@')[0];
}

const email = 'bobbyhadz@email.com';

const name = extractNameFromEmail(email);
console.log(name); // 👉️ bobbyhadz

The function takes an email as a parameter and extracts the name from the email.

# Handle the case where the string doesn't contain an @ symbol

If an @ symbol is not contained in the string, you'd get an array containing the entire string as a parameter.

Copied!
const email = 'bobbyhadzemail.com';

// 👇️ [ 'bobbyhadzemail.com' ]
console.log(email.split('@'));

If you need to handle this scenario, use an if statement.

Copied!
const email = 'bobbyhadzemail.com';

let name = '';

if (email.includes('@')) {
  name = email.split('@')[0];
}

console.log(name); // 👉️ ""

The String.includes() method returns true if the supplied substring is contained in the string and false otherwise.

We only reassign the name variable, if the @ symbol is contained in the string.

An alternative approach is to use the String.slice() method.

# Extract the Name from an Email Address using String.slice

This is a two-step process:

1. Use the String.indexOf() method to get the index of the @ character.
2. Use the slice() method to get the part of the string up to the index.

Copied!
const email = 'bobbyhadz@email.com';

const result = email.slice(0, email.indexOf('@'));
console.log(result); // 👉️ "bobbyhadz"

The String.slice() method extracts a section of a string and returns it, without modifying the original string.

The String.slice() method takes the following arguments:

The slice starts at index 0 and goes up to, but not including the index of the @ character.

We used the String.indexOf() method to get the index of the @ character in the string.

Copied!
const email = 'bobbyhadz@email.com';

console.log(email.indexOf('@')); // 👉️ 9

The String.indexOf() method returns the index of the first occurrence of a substring in a string.

If the substring is not contained in the string, the method returns -1.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

• How to Extract a Number from a String in JavaScript
• Get the Nth Character of a String in JavaScript
• Get the Substring after a specific Character in JavaScript
• Get the Substring before a specific Character in JavaScript
• Get a Substring between 2 Characters in JavaScript