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.

I just wanted to point out that having the actual, full email on the page might be a security vulnerability. If you're going to have it on the page anyway, why bother doing this, maybe you should do this server side? — Austin Schmidt, Jun 27 '16 at 13:32
I am not sure, but you're using regular expression, right? `$scope.emailClue = emailParts[0].replace(/./gi, '.*.') + '@' + emailParts[1];` — RaV, Jun 27 '16 at 13:33
@AustinSchmidt actually, this is done in the the server side in our real app, I just put it in the client code for some example. Thanks.:) — Ana Liza Pandac, Jun 27 '16 at 13:33
preg_match(^(.).+(.\@.+\..+$)', $firstletter, $lastpart); s@toto.com(not matched) and cc@toto.com(show everything) create a problem — Destrif, Jun 27 '16 at 13:35
@TZHX I've also ask my team the same question that you have but they said that the client wants to implement this. — Ana Liza Pandac, Jun 27 '16 at 13:37
@alex_andrea, I messed up a bit, it should be '(?!^)..', it selects all letters except first and last. — RaV, Jun 27 '16 at 13:50
@Destrif I cannot try your suggestion though because it seems like it's written in PHP but thanks. — Ana Liza Pandac, Jun 27 '16 at 13:58

score 4 · Accepted Answer · answered Jun 27 '16 at 13:38

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>

Thanks Jonathan. It's perfect.I'll accept your answer later once I'm able to..:) — Ana Liza Pandac, Jun 27 '16 at 13:43

score 1 · Answer 2 · 2016-06-27T13:40:58.747

1

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;
}));

edited Jun 27 '16 at 13:40

answered Jun 27 '16 at 13:38

s@toto.com not working, and you forget a \. before @ – Destrif Jun 27 '16 at 13:40
Thanks! +1 for you since I've already accepted another answer. – Ana Liza Pandac Jun 27 '16 at 13:44

Cam · Answer 3 · 2016-06-27T13:50:54.667

1

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

edited Jun 27 '16 at 13:50

answered Jun 27 '16 at 13:43

Cam

921
7
13

As I've already mentioned in my latest comments, this logic is done in the server side and I'm only passing the email hint to the client side. Thanks for your help.:) – Ana Liza Pandac Jun 27 '16 at 13:47

score 1 · Answer 4 · answered Jun 27 '16 at 13:44

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>

It's a bit longer than using Regex but thanks anyway.:) – Ana Liza Pandac Jun 27 '16 at 13:50 — Ana Liza Pandac, Jun 27 '16 at 13:50

score 1 · Answer 5 · answered Jun 27 '16 at 13:45

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.

it's already solved but thanks for presenting another solution.:) — Ana Liza Pandac, Jun 27 '16 at 13:56

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

5 Answers5