javascript - 通过 getContext 从 HTML 标记中获取文本 - Google Apps 脚本 - 电子表格

Question

所以，我对这个 Google Apps 脚本陷入了相当两难的境地。习惯了传统的 Javascript，这是一个相当大的挑战。我目前正在尝试从 Zillow 中获取值，并且我在前几个项目(租金值(value)、Zestimate、学校评级)上取得了成功，但现在我需要获取学校名称。这变得如此麻烦，以至于我真的被困住了，我似乎无法对我需要得到的东西进行 .match() 。我将发布一些代码，看看其他人是否可以理解这一点。

我正在解析的 Zillow 代码:

<ul class="nearby-schools-list">
<li class="nearby-schools-header">
    <h4 class="nearby-schools-rating">&nbsp;</h4>
    <h4 class="nearby-schools-name">&nbsp;</h4>
    <h4 class="nearby-schools-grades">Grades</h4>
    <h4 class="nearby-schools-distance">Distance</h4>
</li>
<li class="nearby-school assigned-school">
    <span class="gs-rating-badge">
        <div class="gs-rating gs-rating-8">
            <span class="gs-rating-number">8</span>
            <span class="gs-rating-subtext">out of 10</span>
        </div>
    </span>
    <span class="nearby-schools-name"> <a href="/seattle-wa/schools/salmon-bay-school-93956/" class="ga-tracked-link track-ga-event school-name notranslate" data-ga-action="School details click" data-ga-label="HDP AB Module" data-ga-category="Homes" data-ga-standard-href="true">Salmon Bay School</a> 
        <span class="assigned-label de-emph">(assigned)</span>
    </span>
    <span class="nearby-schools-grades">K-8</span>
    <span class="nearby-schools-distance">0.3 mi</span>
</li>
<li class="nearby-school assigned-school">
    <span class="gs-rating-badge">
        <div class="gs-rating gs-rating-8">
            <span class="gs-rating-number">8</span>
            <span class="gs-rating-subtext">out of 10</span>
        </div>
    </span>
    <span class="nearby-schools-name"> <a href="/seattle-wa/schools/whitman-middle-school-93939/" class="ga-tracked-link track-ga-event school-name notranslate" data-ga-action="School details click" data-ga-label="HDP AB Module" data-ga-category="Homes" data-ga-standard-href="true">Whitman Middle</a> 
        <span class="assigned-label de-emph">(assigned)</span>
    </span>
    <span class="nearby-schools-grades">6-8</span>
    <span class="nearby-schools-distance">1.4 mi</span>
</li>
<li class="nearby-school assigned-school">
    <span class="gs-rating-badge">
        <div class="gs-rating gs-rating-9">
            <span class="gs-rating-number">9</span>
            <span class="gs-rating-subtext">out of 10</span>
        </div>
    </span>
    <span class="nearby-schools-name"> <a href="/seattle-wa/schools/ballard-high-school-92363/" class="ga-tracked-link track-ga-event school-name notranslate" data-ga-action="School details click" data-ga-label="HDP AB Module" data-ga-category="Homes" data-ga-standard-href="true">Ballard High</a> 
        <span class="assigned-label de-emph">(assigned)</span>
    </span>
    <span class="nearby-schools-grades">9-12</span>
    <span class="nearby-schools-distance">0.2 mi</span>
</li>

这是一个很大的 block ，但本质上我试图从 school-name 中获取文本，这是 ul > li > span.nearby-schools-name 下列出的一个类> a.学校名称.

这是我的尝试，但无论我做什么，我都会返回空白。

// get School Names
var match = contentText.match(/<a href="([^<]*)" class="ga-tracked-link track-ga-event school-name notranslate" /g);
Browser.msgBox(match);
var schoolNameArray = new Array();

while (match.length > 0) {
    var thisSchoolName = new String(schoolName.pop());
    Browser.msgBox(thisSchoolName);
    //schoolNameArray.push(thisSchoolName);
}

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

快速常见问题解答，我尝试过网络上复制 getElementsByClassName 的功能，但没有成功。我也尝试抓取 href

Answer 1

这是一种方法。首先按类名获取所有元素:

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

返回的是一个对象。如果将变量 elSchoolNames 显示到控制台，console.log('elSchoolNames: ' + elSchoolNames ); 它将如下所示:

[object HTMLCollection]

对象内部[object HTMLCollection]是一堆更多的对象；对象数组。

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

重要的是要理解对象具有key:value 对，但也有一个没有键(属性)的对象数组。要从主对象中获取子对象，请按编号引用它们，因为它们没有属性名称，因为它是该级别的数组。

您需要所有 Span 元素。

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

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

学校的名称位于对象的 textContent 属性中。

我如何知道第一个对象内的所有对象是什么，以及第一个 Span 元素的内容是什么？我循环遍历了对象的所有属性。

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

要获取子元素，您需要取出第一个元素之后的每个元素。因为它的索引为零，所以第二个元素是数字 1。

var theSpanEl = elSchoolNames[1];

现在，要查看您拥有什么，请将其打印到控制台:

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

这给你:

textContent:  Salmon Bay School 
    (assigned)

当然，您需要使用字符串方法去掉末尾的(assigned)。您不需要为此使用 .match() 或 regEx。

我刚刚意识到，如果您从不属于您的网站获取 HTML 内容，并且 HTML 内容是一个字符串，那么这些都不起作用。除非您使用innerHTML将HTML注入(inject)到您的网站中，然后使用上面的代码。