Conceal the message using star symbols

Question

Conceal the message using star symbols

I need help figuring out how to hide a certain type of string input from the user, and then use Angular data binding to display it in another component with part of the data masked with asterisks. I'm not very skilled in JavaScript, so I'm wondering if it's possible to achieve this using CSS instead?

            <p class="subtitle">
                We have sent an email to<br />
                <b>{{ capturedEmail }}</b> with instructions<br />
                on how to recover your password.<br />
                Once you reset your password, you will be able to log in<br />
                to the platform with your credentials.
            </p>

The code snippet above shows where I want to apply this feature to the {{ capturedEmail }} property

For example:

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

javascript css angular typescript

Answer 1

Answer №1

If you're looking to obfuscate email addresses in Angular, you can achieve this using a custom Pipe. For a practical demonstration, here is a Stackblitz Demo showcasing how it's done.

<h1>{{ email | obfuscateEmail }}</h1>

@Pipe({ name: 'obfuscateEmail' })
export class ObfuscateEmailPipe implements PipeTransform {

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

}

Result

<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="82e1edf0f0e7edc2efe3ebeeace1edef">[email protected]</a>         >    c*****@mail.com
<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="cea4a1a6a0e0b9a7ada5fcfc8ea9a3afa7a2e0ada1a3">[email protected]</a>   >    j**********@gmail.com

Answer 2

If you're looking to obfuscate email addresses in Angular, you can achieve this using a custom Pipe. For a practical demonstration, here is a Stackblitz Demo showcasing how it's done.

<h1>{{ email | obfuscateEmail }}</h1>

@Pipe({ name: 'obfuscateEmail' })
export class ObfuscateEmailPipe implements PipeTransform {

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

}

Result

<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="82e1edf0f0e7edc2efe3ebeeace1edef">[email protected]</a>         >    c*****@mail.com
<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="cea4a1a6a0e0b9a7ada5fcfc8ea9a3afa7a2e0ada1a3">[email protected]</a>   >    j**********@gmail.com

Answer 3

Answer №2

Essentially, the aim is to conceal the email using asterisks, so by passing any email to the following code snippet, your issue will be resolved.

Give this JavaScript code a try:

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 <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="84f1f7e1f6eae5e9e1c4e1fce5e9f4e8e1aae7ebe9">[email protected]</a> test', function(err,res){
console.log(res);
});

Result: u*******<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bfdaffdac7ded2cfd3da91dcd0d2">[email protected]</a>

Answer 4

Essentially, the aim is to conceal the email using asterisks, so by passing any email to the following code snippet, your issue will be resolved.

Give this JavaScript code a try:

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 <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="84f1f7e1f6eae5e9e1c4e1fce5e9f4e8e1aae7ebe9">[email protected]</a> test', function(err,res){
console.log(res);
});

Result: u*******<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bfdaffdac7ded2cfd3da91dcd0d2">[email protected]</a>

Conceal the message using star symbols

Answer №1

Answer №2

Similar questions

Problem with Andular's datepicker functionality and local change detection

Got any ideas for Laravel 8's One to One messaging feature?

What can be done to ensure that the a href tag is functioning as clickable?

What is the best way to pass a mask without using a plug-in when dealing with an input value in Vue.js?

Is there a way for me to gain entry to this array in vuejs?

I am encountering an issue with my function where I aim to prevent the creation of a node using duplicate coordinates

Ensuring a response is sent back only after a loop has completed in NodeJs

Issue with Bootstrap 3 dropdown not receiving updates

What is the process for converting an array of objects into an array of form groups?

React Router is not compatible with ReactJS app version 18

The Select2 widget passes parameter term spaces to the ajax request as a plus sign "+" instead of %20

Having trouble centering my menu bar on CSS, can anyone help?

I'm currently troubleshooting the code for the Gallery project. The gallery is supposed to have 4x4 grids, but for some reason, the grids are

Combine a string and integer in JavaScript without using quotation marks between them

What is the best way to extract information from an API using javascript?

Arrange text in a line below neatly in a list

What is the method to insert a new <input> element after the last input field has been filled in

Encountering errors in Visual Studio when trying to work with node_modules directories that have a tsconfig

What is the best way to arrange a list of dates without taking into account the year associated with each date?

Issue: Unable to access GET request with Express and handlebars