Text Node Selector within single td using jQuery

Question

I need to extract the text after Name:, Phone:, Email:, Lead Submitted:, Comments:, Property Address 1:

The problem is all these text nodes are siblings. I don't know how to choose a sibling by number if it's a text node - e.g. the top sibling is a span but the rest are text nodes. I have tried different iterations but the only thing I'm getting to work is var comments = $('span:contains("Renter's Information")').siblings().text().trim(); But this pulls all the text, not just the comments text. Ideally I'd like to get not just each text node but the text after 'Name:', 'Phone:' etc. but I will probably have to trim that off post jQuery though. Any guidance on pulling these individual text nodes would be appreciated.


Renter's Information

 Name: Shelby 

 Phone: (555) 555-555

 Email: email@gmail.com

 Lead Submitted: 9/13/2020 1:42:37 PM



 Renter's Preferences

 Beds/Baths:

 Model:

 Unit:



 Move Date: 11/2/2020

 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 & just some details so we can look to see if we want to check it out. Thank you!



 Property Information

 Link: https://www.apartments.com/

 To: property

 Property Address 1: property

 Property Address 2: 

 City: city

 State: NY

 Zip: 12345



 Wishing you success in converting this True Lead™ to a lease!

 The Apartments.com Network Team

Saadi Toumi Fouad · Accepted Answer

I understood from your question that you want to get some text according to some keywords in your HTML, here is an implementation for that! and I have edited my answer to store the content in an array instead of logging them on the fly

// 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 
 element before each span element that makes it
  // easy to just get the html and split it into lines
  htmlContent.split("
").forEach(function(e) {
    if(e.startsWith(` ${searchKeywords[arr.length]}`)) {
      // if the current line starts with the current keyword then if it has an
      //  tag then get the text of it, otherwise just slice the keyword name
      arr.push((e.includes("") + 1, e.indexOf("")) : e.slice(e.indexOf(":") + 1)).trim());
    }
  });
  return arr;
}

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


  
    
      Renter's Information
      
 Name: Shelby 
      
 Phone: (555) 555-555
      
 Email: email@gmail.com
      
 Lead Submitted: 9/13/2020 1:42:37 PM
      

      
 Renter's Preferences
      
 Beds/Baths:
      
 Model:
      
 Unit:
      

      
 Move Date: 11/2/2020
      
 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 & just some details so we can look to see if we want to check it out. Thank you!
      

      
 Property Information
      
 Link: https://www.apartments.com/
      
 To: property
      
 Property Address 1: property
      
 Property Address 2: 
      
 City: city
      
 State: NY
      
 Zip: 12345
      

      
 Wishing you success in converting this True Lead™ to a lease!
      
 The Apartments.com Network Team

And for your comment:

The above HTML is part of a much larger section of HTML so to locate the td I'd have to search for the text "Renter's Information" and then from there I can implement the script you recommended

Well you can filter the span elements to get the one that has the text content "Renter's Information" and then get its parent element which will be the td element you are looking for, here is the code

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

And then get your content by calling getTextContent() like this

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

Text Node Selector within single td using jQuery

Answers (1)

Related Questions