如何从字符串中检索电子邮件地址和姓名并使用正则表达式将它们插入 HTML 表中？

Question

我有一个字符串，其中包含人员的姓名（名字和姓氏）、用户名和电子邮件地址。我需要获取姓名和电子邮件地址，并使用正则表达式（正则表达式）将它们添加到 HTML 表中。

HTML 表格应如下所示：

到目前为止，这是我的 javascript 代码：

// this is some example of the names & email adresses - they are fake
const outlook = "Anders Jensen (EAAAANJE) <eaaaanje@students.eaax.dk>; Bodil Pedersen (EAAABOPE) <eaaabope@students.eaax.dk>; Åse Andersen (EAAAIDAN) <eaaaasan@students.eaax.dk>; Mühl Svendsen (EAAAPESV) <eaaamusv@students.eaax.dk>";

// we find all the emails & names of the students
let regexEmail = /\<.*?\>/g;
let regexName = /\w+\s\w+\s/gi;

// an array of all the td-tags
let tdTags = document.querySelectorAll("td");

// The emails and names are inserted in the table
for(let i = 0; regexName.exec(outlook) !== null; i++) {

    tdTags[i].innerHTML = regexName.exec(outlook)[i]; // name
    tdTags[i].nextSibling.innerHTML = regexEmail.exec(outlook)[i]; // e-mail
}

问题是它只打印一个名称并将其插入第一个 td。并且无法检索电子邮件地址。 我仍然是 Regex 的初学者，所以我看不出我做错了什么。

任何帮助将不胜感激！

Answer 1

首先使用全局match()。这将只返回捕获的字符串。然后遍历该匹配数组并在每个用户上使用exec() 来分隔名称和电子邮件捕获组。

const regex = /([^ ]+ [^ ]+) \(.*?\) <(.*?)>/g;

const outlook = "Anders Jensen (EAAAANJE) <eaaaanje@students.eaax.dk>; Bodil Pedersen (EAAABOPE) <eaaabope@students.eaax.dk>; Åse Andersen (EAAAIDAN) <eaaaasan@students.eaax.dk>; Mühl Svendsen (EAAAPESV) <eaaamusv@students.eaax.dk>";

const tbody = document.getElementById('users')
  .getElementsByTagName('tbody')[0];
const users = outlook.match(regex);

users.forEach((user, index) => {
  const userRegex = /([^ ]+ [^ ]+) \(.*?\) <(.*?)>/;
  const userInfo = userRegex.exec(user);
  const row = tbody.insertRow(index);
  
  if (userInfo) {
    const nameCell = row.insertCell(0);
    const emailCell = row.insertCell(1);
    nameCell.innerHTML = userInfo[1];
    emailCell.innerHTML = userInfo[2];
  }
  
});

table, th, td {
border: 1px solid black;
border-collapse: collapse;
}

th, td {
padding: 10px;
}

<table id="users">
  <thead>
    <tr>
      <th>Name</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody>
  
  </tbody>
</table>

Answer 2

regexName.exec(outlook).length 是 1，所以你的循环只会运行一次。如果您想这样做，您可能需要从outlook 中删除匹配的字符串。但是，我建议您先将 outlook 字符串除以 ;，然后使用该数组的长度作为循环条件。我相信你的正则表达式很好

// this is some example of the names & email adresses - they are fake
const outlook = "Anders Jensen (EAAAANJE) <eaaaanje@students.eaax.dk>; Bodil Pedersen (EAAABOPE) <eaaabope@students.eaax.dk>; Åse Andersen (EAAAIDAN) <eaaaasan@students.eaax.dk>; Mühl Svendsen (EAAAPESV) <eaaamusv@students.eaax.dk>";

// we find all the emails & names of the students
let regexEmail = /\<.*?\>/g;
let regexName = /(\w+\s\w+\s)/gi;

// an array of all the td-tags
let tdTags = [];

let fragments = outlook.split(';');
// The emails and names are inserted in the table
for(let i = 0; i < fragments.length; i++) {
  console.log(fragments[i])
  let name = fragments[i].match(regexName)
  let email = fragments[i].match(regexEmail)

  tdTags.push({ name, email: email });// e-mail
}

Answer 3

一旦你有一个字符串，我会使用类似的东西： string.match(/\/g)[0]

Answer 4

我知道你的问题是关于正则表达式的，但我只会使用旧的 split：

// this is some example of the names & email adresses - they are fake
const outlook = "Anders Jensen (EAAAANJE) <eaaaanje@students.eaax.dk>; Bodil Pedersen (EAAABOPE) <eaaabope@students.eaax.dk>; Åse Andersen (EAAAIDAN) <eaaaasan@students.eaax.dk>; Mühl Svendsen (EAAAPESV) <eaaamusv@students.eaax.dk>";

// Get an array of the addresses by splitting on ;
const addresses = outlook.split(';').map(s => s.trim());
for (let address of addresses) {
  // Split each address on space
  const parts = address.split(' ');
  // the first two should be first and last name
  const name = `${parts[0]} ${parts[1]}`;
  // the fourth element should be the email address
  // remove the angle brackets
  const email = parts[3].replace(/(<|>)/g, '');
  // Do your table thing with the results
  console.log(name, email);
}