Selector de consultas para texto específico dentro de un TD

Question

Un <td> contiene el siguiente contenido:

Clave del candidato: ABCDEFG

someemail@gmail.com

1237567541

Y su querySelector es:

document.querySelector('#content > table > tbody > tr:nth-child(1) > td:nth-child(1) > table > tbody > tr:nth-child(2) > td:nth-child(1) > table > tbody > tr > td:nth-child(2)')

QuerySelector devuelve:

<td width="150">
                Candidate Key: ABCDEFG
                <br>someemail@gmail.com
                <br>1237567541          
</td>

Necesito extraer solo la dirección de correo electrónico. Podría lograr esto con JavaScript usando una subcadena desde el primer <br> al segundo <br>. Pero para mi caso de uso particular, tengo que poder lograrlo solo dentro del querySelector. ¿Hay alguna manera de hacerlo? ¿Algo como agregar br(0).innerText?

javascript

0

extensionhelp 10 may. 2019 a las 00:46

Answer 1

Si el contenido de td es consistente, entonces la solución más simple sería:

const email = document.querySelector('td').innerHTML.split('<br>')[1].trim();

console.log(email);

<table>
  <tbody>
    <tr>
      <td width="150">
        Candidate Key: ABCDEFG
        <br>someemail@gmail.com
        <br>1237567541
      </td>
    </tr>
  </tbody>
</table>

1

braza 9 may. 2019 a las 22:09

Answer 2

Hay más simple => usar fila / celda

const myTable = document.querySelector('#content table tbody');

let
  txt_1_2 = myTable.rows[1].cells[2].innerHTML,
  eMail   = txt_1_2.split('<br>')[1].trim();
  
  
console.log(eMail);

table { border-collapse: collapse;}
td { border: 1px solid grey}

<div id="content">
 <table>
  <tbody>
   <tr> <td>0.0</td> <td>0.1</td> <td>0.2</td> </tr>
   <tr>
    <td>1.0</td>
    <td>1.1</td>
    <td>
     Candidate Key: ABCDEFG
     <br>someemail@gmail.com
     <br>1237567541
    </td>
   </tr>
  </tbody>
 </table>
</div>

0

Mister Jojo 9 may. 2019 a las 22:11

Answer 3

Probablemente quieras usar Regex. Algo como esto:

var email = document.querySelector('div').innerHTML.match(/\b[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}\b/i);
console.log(email);

<div>
  Candidate Key: ABCDEFG
  <br>someemail@gmail.com
  <br>1237567541          
</div>

Entonces el suyo se verá así:

var email = document.querySelector('#content > table > tbody > tr:nth-child(1) > td:nth-child(1) > table > tbody > tr:nth-child(2) > td:nth-child(1) > table > tbody > tr > td:nth-child(2)').innerHTML.match(/\b[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}\b/i);

0

imtheman 9 may. 2019 a las 21:59

Answer 4

Lo sentimos, no puede hacerlo directamente en la llamada querySelectorAll. No admite patrones de expresiones regulares. Es posible que pueda hacerlo con un enfoque "contiene", pero incluso eso solo lo llevaría al <td> externo, porque los selectores solo pueden tomar elementos y no los nodos de texto.

0

Jordan Rieger 9 may. 2019 a las 22:22

Selector de consultas para texto específico dentro de un TD

4 respuestas

Preguntas relacionadas

Nuevas preguntas

javascript