Masking email to hide it in JavaScript

It is a common practice that when websites display anyone's private email address they often mask it in order to maintain privacy.

For example, if someone's email address is:

const email = 'ramkumar@example.com';

It is displayed like this:

r...r@example.com

We need to write a JavaScript function that takes an email string and returns the masked email for that string.

Basic Email Masking Function

Here's a simple approach that masks the username part of the email:

const email = 'ramkumar@example.com';

const maskEmail = (email = '') => {
    const [name, domain] = email.split('@');
    const { length: len } = name;
    const maskedName = name[0] + '...' + name[len - 1];
    const maskedEmail = maskedName + '@' + domain;
    return maskedEmail;
};

console.log(maskEmail(email));

r...r@example.com

Enhanced Version with Validation

Here's an improved version that handles edge cases and validates the input:

const maskEmail = (email = '') => {
    // Validate email format
    if (!email || !email.includes('@')) {
        return 'Invalid email';
    }
    
    const [name, domain] = email.split('@');
    
    // Handle short usernames
    if (name.length <= 2) {
        return name[0] + '***@' + domain;
    }
    
    const maskedName = name[0] + '***' + name[name.length - 1];
    return maskedName + '@' + domain;
};

// Test with different email formats
console.log(maskEmail('john.doe@example.com'));
console.log(maskEmail('a@test.com'));
console.log(maskEmail('longusername@company.org'));
console.log(maskEmail('invalid-email'));

j***e@example.com
a***@test.com
l***e@company.org
Invalid email

Alternative Masking Approaches

Different masking strategies for various privacy levels:

const email = 'johnsmith@example.com';

// Method 1: Show first and last character
const maskMethod1 = (email) => {
    const [name, domain] = email.split('@');
    return name[0] + '***' + name[name.length - 1] + '@' + domain;
};

// Method 2: Show only first character
const maskMethod2 = (email) => {
    const [name, domain] = email.split('@');
    return name[0] + '***@' + domain;
};

// Method 3: Show first two characters
const maskMethod3 = (email) => {
    const [name, domain] = email.split('@');
    return name.substring(0, 2) + '***@' + domain;
};

console.log('Original:', email);
console.log('Method 1:', maskMethod1(email));
console.log('Method 2:', maskMethod2(email));
console.log('Method 3:', maskMethod3(email));

Original: johnsmith@example.com
Method 1: j***h@example.com
Method 2: j***@example.com
Method 3: jo***@example.com

Comparison of Methods

Conclusion

Email masking is essential for privacy protection. Choose the masking method based on your security requirements and user experience needs.