How to modify the values of a table td if it has a specific character?

Question

I have a table that presents dynamic data, some of them are emails, how do I modify their value by adding the tag <kbd> and </kbd> between the value of each using javascript only?

Example: [email protected]
Expected: <kbd>[email protected]</kbd>

Thus, any value that contains a @ enters the modification rule, until semdomain@config....

Dynamic table code:

<div class="tablebg">
    <table id="sortabletbl0" class="datatable" width="100%" border="0" cellspacing="1" cellpadding="3">
        <tbody>
            <tr>
                <th width="20">
                    <input type="checkbox" id="checkall0">
                </th>
                <th><a href="/admin/services?orderby=id">ID</a> </th>
                <th><a href="/admin/services?orderby=product">Produto/Serviço</a></th>
                <th><a href="/admin/services?orderby=domain">Domínio</a></th>
                <th><a href="/admin/services?orderby=clientname">Nome do Cliente</a></th>
                <th><a href="/admin/services?orderby=amount">Preço</a></th>
                <th><a href="/admin/services?orderby=billingcycle">Ciclo de Pagamento</a></th>
                <th><a href="/admin/services?orderby=nextduedate">Próximo Vencimento</a></th>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" name="selectedclients[]" value="5" class="checkall">
                </td>
                <td><a href="/admin/clientsservices.php?userid=1&amp;id=5">5</a></td>
                <td>Conta Serviço A <span class="label pending">Pending</span></td>
                <td><a href="/admin/clientsservices.php?userid=1&amp;id=5">(Nenhum Domínio)</a></td>
                <td><a href="/admin/clientssummary.php?userid=1">Teste Teste</a></td>
                <td>R$0.00 BRL</td>
                <td>Gratuito</td>
                <td>-</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" name="selectedclients[]" value="4" class="checkall">
                </td>
                <td><a href="/admin/clientsservices.php?userid=1&amp;id=4">4</a></td>
                <td>Conta Serviço A <span class="label active">Active</span></td>
                <td><a href="/admin/clientsservices.php?userid=1&amp;id=4">[email protected]</a></td>
                <td><a href="/admin/clientssummary.php?userid=1">Teste Teste</a></td>
                <td>R$0.00 BRL</td>
                <td>Gratuito</td>
                <td>-</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" name="selectedclients[]" value="3" class="checkall">
                </td>
                <td><a href="/admin/clientsservices.php?userid=1&amp;id=3">3</a></td>
                <td>Conta Serviço A <span class="label active">Active</span></td>
                <td><a href="/admin/clientsservices.php?userid=1&amp;id=3">semdomain@config...</a></td>
                <td><a href="/admin/clientssummary.php?userid=1">Teste Teste</a></td>
                <td>R$0.00 BRL</td>
                <td>Gratuito</td>
                <td>-</td>
            </tr>
        </tbody>
    </table>
</div>

How could I do this, so that the result would be the same as shown below?

<div class="tablebg">
    <table id="sortabletbl0" class="datatable" width="100%" border="0" cellspacing="1" cellpadding="3">
        <tbody>
            <tr>
                <th width="20">
                    <input type="checkbox" id="checkall0">
                </th>
                <th><a href="/admin/services?orderby=id">ID</a> </th>
                <th><a href="/admin/services?orderby=product">Produto/Serviço</a></th>
                <th><a href="/admin/services?orderby=domain">Domínio</a></th>
                <th><a href="/admin/services?orderby=clientname">Nome do Cliente</a></th>
                <th><a href="/admin/services?orderby=amount">Preço</a></th>
                <th><a href="/admin/services?orderby=billingcycle">Ciclo de Pagamento</a></th>
                <th><a href="/admin/services?orderby=nextduedate">Próximo Vencimento</a></th>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" name="selectedclients[]" value="5" class="checkall">
                </td>
                <td><a href="/admin/clientsservices.php?userid=1&amp;id=5">5</a></td>
                <td>Conta Serviço A <span class="label pending">Pending</span></td>
                <td><a href="/admin/clientsservices.php?userid=1&amp;id=5">(Nenhum Domínio)</a></td>
                <td><a href="/admin/clientssummary.php?userid=1">Teste Teste</a></td>
                <td>R$0.00 BRL</td>
                <td>Gratuito</td>
                <td>-</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" name="selectedclients[]" value="4" class="checkall">
                </td>
                <td><a href="/admin/clientsservices.php?userid=1&amp;id=4">4</a></td>
                <td>Conta Serviço A <span class="label active">Active</span></td>
                <td><a href="/admin/clientsservices.php?userid=1&amp;id=4"><kbd>[email protected]</kbd></a></td>
                <td><a href="/admin/clientssummary.php?userid=1">Teste Teste</a></td>
                <td>R$0.00 BRL</td>
                <td>Gratuito</td>
                <td>-</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" name="selectedclients[]" value="3" class="checkall">
                </td>
                <td><a href="/admin/clientsservices.php?userid=1&amp;id=3">3</a></td>
                <td>Conta Serviço A <span class="label active">Active</span></td>
                <td><a href="/admin/clientsservices.php?userid=1&amp;id=3"><kbd>semdomain@config...</kbd></a></td>
                <td><a href="/admin/clientssummary.php?userid=1">Teste Teste</a></td>
                <td>R$0.00 BRL</td>
                <td>Gratuito</td>
                <td>-</td>
            </tr>
        </tbody>
    </table>
</div>

Answer 1

What you can do is something like this. It is to work in this case too(semdomain@config...)?

In this case this code only takes the validated emails.

$(function(){
    $("td a").each(function(){
      var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
      var content = $(this).html();
      //console.log(content);
      if(re.test(String(content).toLowerCase())){
        $(this).html("<kbd>"+content+"</kbd>"); 
      }
  })

 });