求助：如何用基础HTML/CSS实现邮箱地址脱敏显示功能

Hey Sonny，我来帮你搞定这个邮箱脱敏显示的需求！基于你现有的HTML/CSS基础，咱们只需要加几行JavaScript就能轻松实现，两种方案我都给你写出来，你可以按需选择~

方案一：固定显示5个星号（符合你的优先需求） #

这个方案会保留邮箱前2个字符，接着固定加5个星号，最后保留@及后面的域名部分，比如somethingnice@gmail.com会变成so*****@gmail.com。

完整代码 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>邮箱脱敏显示</title>
  <style>
    #emailInput {
      padding: 8px 12px;
      font-size: 16px;
      width: 300px;
      margin-bottom: 10px;
      border: 1px solid #ddd;
      border-radius: 4px;
    }
    #maskedEmail {
      font-size: 18px;
      color: #333;
    }
  </style>
</head>
<body>
  <input type="text" id="emailInput" placeholder="粘贴或输入邮箱地址试试">
  <p id="maskedEmail"></p>

  <script>
    const emailInput = document.getElementById('emailInput');
    const maskedEmailEl = document.getElementById('maskedEmail');

    // 监听输入/粘贴事件，实时处理邮箱
    emailInput.addEventListener('input', function(e) {
      const email = e.target.value.trim();
      if (!email) {
        maskedEmailEl.textContent = '';
        return;
      }

      // 简单验证邮箱格式（包含@符号）
      const atIndex = email.indexOf('@');
      if (atIndex === -1) {
        maskedEmailEl.textContent = '请输入有效的邮箱地址';
        return;
      }

      // 拼接脱敏后的邮箱
      const prefix = email.slice(0, 2); // 取前2个字符
      const domain = email.slice(atIndex); // 取@及后面的部分
      const maskedEmail = `${prefix}*****${domain}`;

      maskedEmailEl.textContent = maskedEmail;
    });
  </script>
</body>
</html>

代码说明 #

• 给输入框绑定了input事件，不管是粘贴还是手动输入，都会实时触发处理逻辑
• 先做简单的格式校验，确保输入的内容包含@符号
• 通过字符串截取和拼接，快速生成脱敏后的邮箱并显示在段落中

方案二：替换前两位到@之间的所有字符为星号 #

如果固定5个星号的需求有特殊场景限制，这个方案会把前2个字符到@之间的所有内容替换成对应数量的星号，比如abcdef@gmail.com会变成ab****@gmail.com。

核心JS代码修改 #

只需要把方案一中的JavaScript部分替换成下面这段即可：

const emailInput = document.getElementById('emailInput');
const maskedEmailEl = document.getElementById('maskedEmail');

emailInput.addEventListener('input', function(e) {
  const email = e.target.value.trim();
  if (!email) {
    maskedEmailEl.textContent = '';
    return;
  }

  const atIndex = email.indexOf('@');
  if (atIndex === -1) {
    maskedEmailEl.textContent = '请输入有效的邮箱地址';
    return;
  }

  const prefix = email.slice(0, 2);
  // 计算需要替换成星号的字符长度
  const middleCharCount = atIndex - 2;
  // 生成对应数量的星号（如果长度<=0就不生成）
  const maskedMiddle = middleCharCount > 0 ? '*'.repeat(middleCharCount) : '';
  const domain = email.slice(atIndex);

  const maskedEmail = `${prefix}${maskedMiddle}${domain}`;
  maskedEmailEl.textContent = maskedEmail;
});

代码说明 #

• 核心逻辑是计算前2位到@之间的字符数量，用*.repeat()生成对应数量的星号
• 如果邮箱@之前的部分不足2位（比如a@gmail.com），会直接保留原有前缀，不会额外添加星号

内容的提问来源于stack exchange，提问作者Neelfinity