使用JavaScript从文本域的邮箱地址中提取姓名至目标文本域

我来帮你搞定这个邮箱姓名提取的需求！下面是完整的实现方案，直接就能用，还考虑了多种日常输入场景：

完整代码实现 #

<html>
<body>
  Insert e-mail addresses:<br>
  <textarea id="myTextarea" rows="5" cols="50" placeholder="输入多个邮箱，用逗号或换行分隔"></textarea>
  <br>
  Extracted names:<br>
  <textarea id="myTextarea2" rows="5" cols="50" readonly></textarea>

  <script>
    // 获取两个文本域元素
    const emailTextarea = document.getElementById('myTextarea');
    const nameTextarea = document.getElementById('myTextarea2');

    // 定义处理邮箱提取姓名的核心函数
    function extractNamesFromEmails() {
      // 获取输入内容并去除首尾空白
      const emailContent = emailTextarea.value.trim();
      if (!emailContent) {
        nameTextarea.value = '';
        return;
      }

      // 分割邮箱：支持逗号、分号、换行/回车作为分隔符，兼容不同输入习惯
      const emails = emailContent.split(/[,;\n\r]+/).map(email => email.trim()).filter(email => email);

      // 逐个处理邮箱，提取姓名
      const names = emails.map(email => {
        // 截取@符号前的部分
        const localPart = email.split('@')[0];
        // 把点号替换成空格，保留原有大小写
        return localPart.replace(/\./g, ' ').trim();
      });

      // 把处理后的姓名用换行分隔，放到第二个文本域
      nameTextarea.value = names.join('\n');
    }

    // 监听输入事件，实时更新结果
    emailTextarea.addEventListener('input', extractNamesFromEmails);
    // 页面加载时初始化处理一次
    extractNamesFromEmails();
  </script>
</body>
</html>

关键功能说明 #

• 实时响应：用户在第一个文本域输入或修改邮箱时，第二个文本域会立刻同步更新提取后的姓名
• 灵活分隔支持：兼容逗号、分号、换行/回车等多种分隔方式，适配日常不同的输入习惯
• 边界情况处理：自动过滤空项（比如连续输入逗号的情况），去除多余空格，避免无效内容
• 保留原有格式：严格保留姓名的大小写（比如J.doe@mail.com会提取成J doe，完全符合你的要求）
• 结果保护：第二个文本域设置为readonly，防止误修改提取后的姓名内容

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