使用 jQuery 的单个 td 中的文本节点选择器

Question

我需要在姓名：、电话：、电子邮件：、潜在客户提交：、评论：、物业地址 1 之后提取文本：问题是所有这些文本节点都是兄弟姐妹。如果它是一个文本节点，我不知道如何通过数字选择一个兄弟节点——例如，顶部的兄弟节点是一个跨度，但其余的是文本节点。我尝试了不同的迭代，但我唯一要做的就是 var comments = $('span:contains("Renter's Information")').siblings().text().trim(); 但这会拉取所有文本，而不仅仅是评论文本。理想情况下，我不仅希望获得每个文本节点，还希望获得“姓名：”、“电话：”等之后的文本，但我可能不得不在 jQuery 后删除它。任何关于拉动这些单独文本节点的指导将不胜感激。<td align="left" style="font-family:'Lucida Grande','Lucida Sans Unicode','Lucida Sans','DejaVu Sans',Verdana,sans-serif;font-size:14px;color:#666;padding:24px"><span style="font-size:18px;font-weight:bold;color:#333">Renter's Information</span><br> Name: Shelby <br> Phone: <a href="tel:(555)%25555-5555" style="color:#666;text-decoration:none" target="_blank">(555) 555-555</a><br> Email: <a href="mailto:[e-mail]" style="color:#666;text-decoration:none" target="_blank">[e-mail]</a><br> Lead Submitted: 9/13/2020 1:42:37 PM<br><br> <span style="font-size:18px;font-weight:bold;color:#333">Renter's Preferences</span><br> Beds/Baths:<br> Model:<br> Unit:<br><br> Move Date: 11/2/2020<br> Comments: Hi there! Just came across your listing online. I was wondering if you could send us some updated photos and financial information, as in if anything is included in cost, how much the house needs paid off &amp; just some details so we can look to see if we want to check it out. Thank you!<br><br> <span style="font-size:18px;font-weight:bold;color:#333">Property Information</span><br> Link: <a href="https://www.apartments.com/" style="color:#77b800;text-decoration:none" target="_blank" data-saferedirecturl="https://www.google.com/url?hl=">https://www.apartments.com/</a><br> To: <a href="#m_7_" style="color:#666;text-decoration:none">property</a><br> Property Address 1: <a href="#m_7654125587635847623_" style="color:#666;text-decoration:none">property</a><br> Property Address 2: <a href="#m_7654125587635847623_" style="color:#666;text-decoration:none"></a>

Answer 1

我从你的问题中了解到你想根据 HTML 中的某些关键字获取一些文本，这是一个实现！我已经编辑了我的答案以将内容存储在数组中而不是动态记录它们

// the words you search for, note that in this solution they need to be ordered

// just to avoid nested for loops that leads to larger time complexity

let searchKeywords = ["Name", "Phone", "Email", "Lead Submitted", "Comments", "Property Address 1"];

            

function getTextContent(keywords, htmlContent) {

  // an array to store in the content

  let arr = [];

  // since there is a <br> element before each span element that makes it

  // easy to just get the html and split it into lines

  htmlContent.split("<br>").forEach(function(e) {

    if(e.startsWith(` ${searchKeywords[arr.length]}`)) {

      // if the current line starts with the current keyword then if it has an

      // <a> tag then get the text of it, otherwise just slice the keyword name

      arr.push((e.includes("<a") ? e.substring(e.indexOf(">") + 1, e.indexOf("</a>")) : e.slice(e.indexOf(":") + 1)).trim());

    }

  });

  return arr;

}

let result = getTextContent(searchKeywords, document.querySelector("td").innerHTML);

console.log(result);

<table>

  <tr>

    <td align="left" style="font-family:'Lucida Grande','Lucida Sans Unicode','Lucida Sans','DejaVu Sans',Verdana,sans-serif;font-size:14px;color:#666;padding:24px">

      <span style="font-size:18px;font-weight:bold;color:#333">Renter's Information</span>

      <br> Name: Shelby 

      <br> Phone: <a href="tel:(555)%25555-5555" style="color:#666;text-decoration:none" target="_blank">(555) 555-555</a>

      <br> Email: <a href="mailto:[e-mail]" style="color:#666;text-decoration:none" target="_blank">[e-mail]</a>

      <br> Lead Submitted: 9/13/2020 1:42:37 PM

      <br>

      <br> <span style="font-size:18px;font-weight:bold;color:#333">Renter's Preferences</span>

      <br> Beds/Baths:

      <br> Model:

      <br> Unit:

      <br>

      <br> Move Date: 11/2/2020

      <br> Comments: Hi there! Just came across your listing online. I was wondering if you could send us some updated photos and financial information, as in if anything is included in cost, how much the house needs paid off &amp; just some details so we can look to see if we want to check it out. Thank you!

      <br>

      <br> <span style="font-size:18px;font-weight:bold;color:#333">Property Information</span>

      <br> Link: <a href="https://www.apartments.com/" style="color:#77b800;text-decoration:none" target="_blank" data-saferedirecturl="https://www.google.com/url?hl=">https://www.apartments.com/</a>

      <br> To: <a href="#m_7_" style="color:#666;text-decoration:none">property</a>

      <br> Property Address 1: <a href="#m_7654125587635847623_" style="color:#666;text-decoration:none">property</a>

      <br> Property Address 2: <a href="#m_7654125587635847623_" style="color:#666;text-decoration:none"></a>

      <br> City: city

      <br> State: NY

      <br> Zip: 12345

      <br>

      <br> <span style="font-weight:bold">Wishing you success in converting this True Lead™ to a lease!</span>

      <br> <span style="font-weight:bold">The <a href="https://www.apartments.com/customers" style="color:#666;text-decoration:none" target="_blank" data-saferedirecturl="https://www.google.com/url?hl=en&amp;q=https://www.apartments.com/customers&amp;source=gmail&amp;ust=1603510777154000&amp;usg=AFQjCNHUYM0naErXYLjI9u_P_I4jk9Xtfg">Apartments.com Network</a> Team</span>

    </td>

  </tr>

</table>

对于您的评论：

上面的 HTML 是更大的 HTML 部分的一部分，因此要找到 td，我必须搜索文本“Renter's Information”，然后从那里我可以实施您推荐的脚本

好吧，您可以过滤 span 元素以获取具有文本内容的元素"Renter's Information" ，然后获取其父元素，这将是td您要查找的元素，这是代码

let tdElement = Array.prototype.filter.call(document.querySelectorAll("span"), function(e) {
  return e.textContent === "Renter's Information";
})[0].parentElement;

然后通过getTextContent()这样调用来获取您的内容

let result = getTextContent(searchKeywords, tdElement.innerHTML);