Question

<td>包含以下内容：

候选密钥：ABCDEFG

someemail@gmail.com

1237567541

其querySelector为：

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返回：

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

我只需要提取电子邮件地址。我可以使用JavaScript从第一个<br>到第二个<br>的子字符串来完成此操作。但是对于我的特定用例，我必须只能在querySelector中完成它。有什么办法吗？像添加br(0).innerText一样？

Answer 1

如果td的内容一致，那么最简单的解决方案是：

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>

Answer 2

您可能需要使用Regex。像这样：

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>

所以您的会像这样：

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);

Answer 3

其他更简单=>使用行/单元格

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>

Answer 4

对不起，您不能直接在querySelectorAll调用中这样做。它不支持正则表达式模式。您也许可以使用“包含”方法来做到这一点，但是即使那样也只能将您带到外部<td>，因为选择器只能捕获元素，而不能捕获文本节点本身。

TD中特定文本的查询选择器

4 个答案: