javascript - 使用星號隱藏文字

我正在嘗試隱藏使用者輸入的一種類型的字串資料，然後透過 Angular 的資料綁定在另一個元件中顯示它，而我想要的是用星號來遮蔽/隱藏這部分資料。我該怎麼做呢？我對 JavaScript 不是很熟悉，有可能用 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>

在上面的程式碼片段中，{{ capturedEmail }} 是我想要添加該屬性的人

範例：

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

答案＃1

你可以為它使用 Angular 管道。隨附此處的是一個 Stackblitz 範例 供你參考

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

}

結果

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

答案＃2

基本上，你試著用星號來遮住電子郵件，因此將任何電子郵件傳給以下這個方法就能解決你的問題。

試試下面的 JavaScript 代碼！

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  test', function(err,res){
console.log(res);
});

Result: u*******[email