Javascript Icon Get 67% off the JavaScript Master Bundle!

See the bundle then add to cart and your discount is applied.

0 days
00 hours
00 mins
00 secs
Javascript

Obscure email addresses with asterisks in JavaScript

Want to obscure an email address with JavaScript? Here’s how. Why might you want to do it? A bit of privacy!

We have lots of subscribers at Ultimate Courses, and I like to see a dashboard shared with my team members when new subscribers join. But, for privacy reasons, I of course want to protect their email addresses before our API sends them back. So, enter obscuring!

What obscuring allows us to do is take an email like this:

…and turn it into this:

t********@website.com

What I’m doing is replacing the number of characters in the email with an asterisk *.

First, let’s create our function that accepts an email string:

const obscureEmail = (email) => {};

Now, we’ll use String.prototype.split to split the email by the @ symbol.

A string split returns an array, and with modern ES6 features, we can infact easily destructure the “name” before the @ symbol and “domain” extension:

const obscureEmail = (email) => {
  const [name, domain] = email.split('@');
  console.log(name); // toddmotto
  console.log(domain); // website.com
};

From here, we need to replace the name with asterisks, but I want to keep the first character instead of obscuring it all.

To get the first character from name we could use substring or just a quick property lookup - as it’s shorter I’m going to vote for name[0].

JavaScript Array Methods eBook Cover

🎉 Download it free!

Ready to go beyond ForEach? Get confident with advanced methods - Reduce, Find, Filter, Every, Some and Map.

  • Green Tick Icon Fully understand how to manage JavaScript Data Structures with immutable operations
  • Green Tick Icon 31 pages of deep-dive syntax, real-world examples, tips and tricks
  • Green Tick Icon Write cleaner and better-structured programming logic within 3 hours

As an extra bonus, we'll also send you some extra goodies across a few extra emails.

We can then cleverly use new Array(name.length) to construct a new array from the length of the string, which will give us an array with undefined values (we don’t care what’s in it, we’re going to join it):

[undefined, undefined, undefined, undefined];

Moving on, we can call new Array(name.length).join('*') which will then join all 4 values and use 3 asterisks. Essentially, if you look above, each comma , will be replaced by * a there are 4 items, there are 3 asterisks.

Then we can append the domain and we’re done:

const obscureEmail = (email) => {
  const [name, domain] = email.split('@');
  return `${name[0]}${new Array(name.length).join('*')}@${domain}`;
};

const email = obscureEmail('[email protected]');
console.log(email); // t********@website.com

🏆 Oh, and if you’d like to learn even more JavaScript, visit our JavaScript courses to see how they can help you level up your skills.

P.S. Here’s a StackBlitz embed with everything inside, so you can have a fiddle with it in real-time:

Free eBooks:

JavaScript Array Methods eBook Cover

Ready to go beyond ForEach? Get confident with advanced methods - Reduce, Find, Filter, Every, Some and Map.

NestJS Build a RESTful CRUD API eBook Cover

Build your first NestJS app. With the CLI you'll learn the basics of real-world NestJS development.