add mailto: before every email

Question

hey so I have a html table with a bunch of people and email addresses. I want to add mailto: before every email. is there anyway to do this using javascript, or preferably a find/replace function in vscode?

  <tr>
    <td>Mrs. john doe</td>
    <td></td>
    <td>first.last4@example.com</td>
    <td>Principal</td>
</tr>
<tr>
    <td>Mr. jerremy fields</td>
    <td></td>
    <td>first.last@example.com</td>
    <td>Deputy</td>
</tr>
<tr>
    <td>Mrs. rebecca statin</td>
    <td></td>
    <td>first.last@example.com</td>
    <td>Deputy</td>
</tr>

ive tried using a vscode find/replace like this:

Find: .+?..+?@example.com Replace: <td>mailto:.+?..+?@example.com

The find works, yet when I try and replace the actual '.?' is being replaced instead of the previous wildcard expression

thanks in advance

Answer 1

You can use the code below. Remember - for mailto: to work, it needs to be in an <a>

Adding a CSS class to the <td> will make the code easier to maintain because if the table structure changes, the email addresses can still be accessed.

<td class="email">email@example.com</td>

const emails = document.querySelectorAll(".email");

 const emails = document.querySelectorAll("tr td:nth-of-type(3)"); emails.forEach(e => e.innerHTML = '<a href="mailto:' + e.textContent + '">' + e.textContent + '</a>');

 <table> <tr> <td>Mrs. john doe</td> <td></td> <td>first.last4@example.com</td> <td>Principal</td> </tr> <tr> <td>Mr. jerremy fields</td> <td></td> <td>first.last@example.com</td> <td>Deputy</td> </tr> <tr> <td>Mrs. rebecca statin</td> <td></td> <td>first.last@example.com</td> <td>Deputy</td> </tr> </table>