CODEWITHSUNDEEP
javascriptcssangulartypescript
Horiuko Kun
Horiuko Kun

Reputation: 57

Hide text with asterisks

I am trying to hide a type of string data that the user types and then by means of a data bing in agular I show it in another component and what I want is to mask/hide part of this data with asterisks. How can I do it? I am not very expert in js, is it possible to do it with css?

            <p class="subtitle">
                Hemos enviado un correo electrónico a<br />
                <b>{{ capturedEmail }}</b> con las instrucciones<br />
                para la recuperación de tu contraseña.<br />
                Una vez reestablezcas la contraseña, podrás<br />
                ingresar a la plataforma con tus datos.
            </p>

In the code snippet above, the {{ capturedEmail }} is who I want to add that property

Example:

[email protected] -> C***@mail.com

Upvotes: 2

Views: 3564

Answers (2)

KShewengger
KShewengger

Reputation: 8269

You can use an Angular Pipe for it. Attached herewith is a Stackblitz Demo for your reference

<h1>{{ capturedEmail | emailAsterisk }}</h1>

@Pipe({ name: 'emailAsterisk' })
export class EmailAsteriskPipe implements PipeTransform {

  transform(value: string): string {
    return value 
      ? value.replace(/\B.+@/g, (c, ) => c.split('').slice(0, -1).map(v => '*').join('') + '@') 
      : value;
  }

}

Result

[email protected]         >    c*****@mail.com
[email protected]   >    j**********@gmail.com

Upvotes: 6

Abdul Moeez
Abdul Moeez

Reputation: 1401

Basically you try to mask the email with asteriks, so pass any email to following this will solve your problem.

Try this below javascript code!

const capturedEmail = function (emailAddress, callback) {
    function mask(str) {
        var strLen = str.length;
        if (strLen > 4) {
            return str.substr(0, 1) + str.substr(1, strLen - 1).replace(/\w/g, '*') + str.substr(-1,1);
        } 
        return str.replace(/\w/g, '*');
    }
    return emailAddress.replace(/([\w.]+)@([\w.]+)(\.[\w.]+)/g, function (m, p1, p2, p3) {      
        return callback(null,mask(p1) + '@' + p2 + p3);
    });
     
}
 
capturedEmail('random string [email protected] test', function(err,res){
console.log(res);
});

Result: u*******[email protected]

Upvotes: 2

Related Questions