Get The Text Out of HTML Tag via getContext - Google Apps Script - Spreadsheets

Question

So, I'm in quite a bit of a dilemma with this Google Apps Script. Being used to traditional Javascript this is quite the challenge. I'm currently trying to pull values from Zillow and I've been successful on the first couple of items (Rent Value, Zestimate, School Ratings) but now I need to get the School Names. This is becoming so much of a hassle that I'm honestly stuck I can't seem to do a .match() on what I need to get. I'll post some code and see if anyone else can get a grasp on this.

The Zillow code I'm parsing:



     
     
    Grades
    Distance


    
        
            8
            out of 10
        
    
     Salmon Bay School 
        (assigned)
    
    K-8
    0.3 mi


    
        
            8
            out of 10
        
    
     Whitman Middle 
        (assigned)
    
    6-8
    1.4 mi


    
        
            9
            out of 10
        
    
     Ballard High 
        (assigned)
    
    9-12
    0.2 mi

That is a large chunk but essentially I'm trying to grab the text out of school-name which is a class listed under ul > li > span.nearby-schools-name > a.school-name.

Here is my attempt and I'm getting returned blanked with anything I do.

// get School Names
var match = contentText.match(/ 0) {
    var thisSchoolName = new String(schoolName.pop());
    Browser.msgBox(thisSchoolName);
    //schoolNameArray.push(thisSchoolName);
}

var schoolNames = schoolNameArray.toString().replace(/,/g, " _ ");

A quick FAQ, I have tried the function that is on the web that replicated the getElementsByClassName and I had no luck. I also tried grabbing the href

Alan Wells · Accepted Answer

Here is one way to do it. First get all the Elements By Class Name:

var elSchoolNames = document.getElementsByClassName("nearby-schools-name");

What gets returned is an object. If you display the variable elSchoolNames to the console, console.log('elSchoolNames: ' + elSchoolNames ); It will look like this:

[object HTMLCollection]

Inside the object [object HTMLCollection] is a bunch of more objects; an array of objects.

[object HTMLHeadingElement]
[object HTMLSpanElement]
[object HTMLSpanElement]
[object HTMLSpanElement]

It's important to understand that the objects have key:value pairs, but there is also an array of objects, with no key (property). To get sub objects out of the main object, refer to them by number, as they have no property name, because it's an array at that level.

You need all the Span Elements.

var theSpanEl = elSchoolNames[1];
var theSpanE2 = elSchoolNames[2];
var theSpanE3 = elSchoolNames[3];

console.log('textContent: ' + theSpanEl.textContent);

The name of the school is in the textContent property of the object.

How do I know what all the objects are inside the first object, and what the contents of the first Span element is? I looped through all the properties of the objects.

var elSchoolNames = document.getElementsByClassName("nearby-schools-name");
console.log('namesOfSchools: ' + elSchoolNames);

for (theProperty in elSchoolNames) {
    console.log('theProperties: ' + theProperty);
    console.log('each value: ' + elSchoolNames[theProperty]);
};

var theSpanEl = elSchoolNames[1];

for (spanProperty in theSpanEl) {
    console.log('theProperties: ' + spanProperty);
    console.log('each value: ' + theSpanEl[spanProperty]);
};

console.log('textContent: ' + theSpanEl.textContent);

To get the sub element you need out every element after the first one. Because it's zero indexed, the second element is number 1.

var theSpanEl = elSchoolNames[1];

Now, to see what you have, print it to the console:

console.log('textContent: ' + theSpanEl.textContent);

That gives you:

textContent:  Salmon Bay School 
    (assigned)

Of course, you'll want to strip off the (assigned) on the end with a string method. You don't need to use .match() or regEx for any of this.

I just realized, that if you are getting the HTML content out of a website that isn't yours, and the HTML content is a string, then none of this will work. Unless you injected the HTML into your site with innerHTML, then used the above code.

Get The Text Out of HTML Tag via getContext - Google Apps Script - Spreadsheets

Answers (1)

Related Questions