How to generate an email clue/hint in this format (ex. j*****e@example.com) using javascript

Question

I have a "forgot email" page in our MEAN app where I need to show an email clue/hint to the user if the details that the user provided is successfully verified.

Let's say the user have the following email: janedoe@example.com .

The hint should be displayed in the following format: j*****e@example.com .

I tried using split() and replace() and I'm able to produce a result in the following format: *******@example.com .

The issue right now is that the first and last character before the @ symbol are also replaced which should not be the case.

I created a simple code to show my current solution below.

 angular.module('app', []).controller('TestController', ['$scope', function($scope) { var email = 'janedoe@example.com'; var emailParts = email.split('@'); $scope.emailClue = emailParts[0].replace(/./gi, '*') + '@' + emailParts[1]; console.log($scope.emailClue); }]) 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="app" ng-controller="TestController"> <p>Our records show your email address as {{ emailClue }}. Please use this email to log in.</p> </div> 

I would really appreciate any help. Thanks.

Answer 1

Try this edit of your code: it takes the first part of the email (the username), takes the first letter and last letter, turns the rest into asterisks, and then joins them back together again.

 angular.module('app', []).controller('TestController', ['$scope', function($scope) { var email = 'janedoe@example.com'; var emailParts = email.split('@'); /* EDITED SECTION */ var firstLetter = emailParts[0].substring(0, 1); var lastLetter = emailParts[0].substring(emailParts[0].length-1, emailParts[0].length); emailParts[0] = emailParts[0].substring(1,emailParts[0].length-1); $scope.emailClue = firstLetter + emailParts[0].replace(/./gi, '*') + lastLetter + '@' + emailParts[1]; /* END EDITED SECTION */ console.log($scope.emailClue); }]) 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="app" ng-controller="TestController"> <p>Our records show your email address as {{ emailClue }}. Please use this email to log in.</p> </div> 

Answer 2

You can try the following code which replaces all the characters after the first one on the email.

 console.log('test@test.fr'.replace(/^(.*)(@.*)$/, function(str, firstMatch, secondMatch) { return str[0] + Array(firstMatch.length - 1).join('*') + firstMatch[firstMatch.length - 1] + secondMatch; })); 

Answer 3

You can base the translation upon the position of the @ character and concatenate the substrings into your result:

angular.module('app', []).controller('TestController', ['$scope', function($scope) {
    var email = 'janedoe@example.com';
    var i = email.indexOf('@')-1;
    $scope.emailClue = email[0] + Array(i).join("*") + email.substring(i);

    console.log($scope.emailClue);
}])
// => "j*****e@example.com"
// ref: http://stackoverflow.com/questions/1877475/repeat-character-n-times

Agree with commenters' concerns about this only adding the appearance of security given the full email is revealed client side

Answer 4

Another solution, without regex.

 angular.module('app', []).controller('TestController', ['$scope', function($scope) { var email = 'janedoe@example.com'; var emailParts = email.split('@'); var mid = '' var name = emailParts[0]; var nameRep = name.substring(1,name.length-1); for(i=nameRep.length;i>0;i--) mid+='*'; var final = name.replace(nameRep, mid); $scope.emailClue = final + '@' + emailParts[1]; console.log($scope.emailClue); }]) 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="app" ng-controller="TestController"> <p>Our records show your email address as {{ emailClue }}. Please use this email to log in.</p> </div> 

Answer 5

You can use the function .charAt(index)

In your example, you can change your code like this :

angular.module('app', []).controller('TestController', ['$scope', function($scope) {
var email = 'janedoe@example.com';
var emailParts = email.split('@');
var lengthName = emailParts[0].length;

var firstChar = emailParts[0].charAt(0); // j
var lastChar = emailParts[0].charAt(lengthName - 1); // e
$scope.emailClue = emailParts[0].replace(/./gi, '*') + '@' + emailParts[1];
$scope.emailClue = $scope.emailClue.charAt(0).replace('*', firstChar); // replace the first char by j
$scope.emailClue = $scope.emailClue.slice(0, -1) + lastChar // deletes the last character and add the last char (e)
console.log($scope.emailClue);
}])

You can use the .slice method everywhere instead of charAt but I find that charAt is more clear !

Hope it helps.