Reputation: 57
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
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
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