使用 CasperJS 提取文本列表

Question

我想从此列表中提取文本值：

<ul class="standardSuggestions">
    <li class="">

        <div id="idac">
            <span class="email" id="idb7"><span>mail-fuer-chrisko</span>@<span>web.de</span></span>
            <span class="btn-positioner"><span class="btn-wrapper btn-fix btn-service btn-xs"><input name="wishnamePanel:suggestionsContainerWrapper:freeMailSuggestionsPanel:standard-suggestion-list:suggestionRepeaterContainer:suggestion-to-repeat:1:suggestion:subForm:select-email" id="idae" value="Übernehmen" type="submit"></span></span>
        </div>

    </li><li class="">

        <div id="idaf">
            <span class="email" id="idb8"><span>post-fuer-chrisko</span>@<span>web.de</span></span>
            <span class="btn-positioner"><span class="btn-wrapper btn-fix btn-service btn-xs"><input name="wishnamePanel:suggestionsContainerWrapper:freeMailSuggestionsPanel:standard-suggestion-list:suggestionRepeaterContainer:suggestion-to-repeat:2:suggestion:subForm:select-email" id="idb0" value="Übernehmen" type="submit"></span></span>
        </div>

    </li><li class="">

        <div id="idb1">
            <span class="email" id="idb9"><span>chrisko1</span>@<span>web.de</span></span>
            <span class="btn-positioner"><span class="btn-wrapper btn-fix btn-service btn-xs"><input name="wishnamePanel:suggestionsContainerWrapper:freeMailSuggestionsPanel:standard-suggestion-list:suggestionRepeaterContainer:suggestion-to-repeat:3:suggestion:subForm:select-email" id="idb2" value="Übernehmen" type="submit"></span></span>
        </div>

    </li><li class="">

        <div id="idb3">
            <span class="email" id="idba"><span>chrisko.1</span>@<span>web.de</span></span>
            <span class="btn-positioner"><span class="btn-wrapper btn-fix btn-service btn-xs"><input name="wishnamePanel:suggestionsContainerWrapper:freeMailSuggestionsPanel:standard-suggestion-list:suggestionRepeaterContainer:suggestion-to-repeat:4:suggestion:subForm:select-email" id="idb4" value="Übernehmen" type="submit"></span></span>
        </div>

    </li>
</ul>

问题是 div id = "" 在每次重新加载时都会发生变化。所以我不确定如何 select 更正元素。我尝试使用以下功能：

casper.then(function(){
    var listItems = this.evaluate(function () {
        var nodes = document.querySelectorAll('ul > li');
        return [].map.call(nodes, function(node) {
            return {
                text: node.querySelector("span").textContent
            };
        });
    });
    this.echo(JSON.stringify(listItems, undefined, 4)); 
});

回声是 "null" :-(

Answer 1

您对元素的迭代是正确的。从页面上下文中获取 null 值的唯一方法是在出现错误时。代码中唯一会产生错误的部分是 node.querySelector("span").textContent，因为 node 不一定有 <span> 后代。如果没有，则此操作失败并出现 TypeError，您将得到 null.

您显示的有限标记始终在每个 <li> 中包含一个 <span>，因此页面上必须有另一个 <ul>，没有 <span> ] 后代。您必须找到不包含其他 <ul> 元素的 CSS 选择器。

我提议

var nodes = document.querySelectorAll('ul.standardSuggestions > li');

使用 CasperJS 提取文本列表

Extract list of texts with CasperJS

javascript

web-scraping

casperjs

text-extraction

html-content-extraction