隐藏带星号的文本

Question

我试图隐藏用户键入的一种字符串数据，然后通过 agular 中的数据 bing 在另一个组件中显示它，我想要的是用星号屏蔽/隐藏部分数据。 我该怎么做？ 我不是很懂js，可以用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 }} 是我要添加该属性的人

例子：

correo@mail.com -> C***@mail.com

Answer 1

您可以为此使用 Angular Pipe。 随附Stackblitz Demo供您参考

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

}

结果

correo@mail.com         >    c*****@mail.com
john.wick22@gmail.com   >    j**********@gmail.com

Answer 2

基本上你尝试用星号掩盖 email，所以将任何 email 传递给以下将解决你的问题。

试试下面的 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 username@example.com test', function(err,res){ console.log(res); });

Result: u*******e@example.com