获取 casper.each 内的子元素

Question

使用带有以下代码的 CasperJS 1.1，我能够从网页中获取有用的 DOM html。

casper.each(c.getElementsInfo(xpath), function(casper, element, j) {
    var html = element["html"].trim();
    if(html.indexOf('Phone') > -1) {
        // what should I put here?
    }
});

但是，我想访问&获取元素的子元素。我怎样才能做到这一点？元素的HTML来源（a.k.ahtml的值）如下：

循环 1

<div class="fields">
                Phone
            </div>
            <div class="values">
                <a href="tel: 12345678">12345678</a> (Mr. Lee)              </div>

循环 2

<div class="fields">
                Emergency Phone
            </div>
            <div class="values">
                <a href="tel: 23456789 (Emergency)">23456789 (Emergency)</a>
            </div>

循环 3

<div class="fields">
                Opening Hours
            </div>
            <div class="values">
                9:00am-6:30pm(Weekday) /
                Close on Sundays and Public Holidays（Can be booked）(Holiday)
            </div>

循环 4

<div class="fields">
                Last Update
            </div>
            <div class="values">
                 11/06/14               </div>

以上 HTML 格式错误，包含大量空格。

我要获取的数据是：

Phone: 12345678
紧急Phone：23456789（紧急）
营业时间：9:00am-6:30pm(平日) / 周日和Public节假日休息（可预订）(节假日)
最后更新时间：2014 年 6 月 11 日

试过 RegEx，但是 RegEx 太复杂了。

Answer 1

我不建议使用正则表达式执行此操作。它可以通过一些 select or 轻松完成，但必须在页面上下文中完成（在 evaluate() 回调内部），因为 DOM 节点无法传递到外部。

CasperJS 提供了一个帮助函数，用于通过始终自动插入的 ClientUtils 模块通过 XPath 将 DOM 节点与 __utils__.getElementsByXPath() 匹配。该函数的结果是一个数组，因此适用正常的 forEach() 模式。 DOM 节点可用作 select 具有 el.querySelector(".class") 的子元素的上下文节点。

var info = casper.evaluate(function(xpath){
    var obj = {};
    __utils__.getElementsByXPath(xpath).forEach(function(el){
        obj[el.querySelector(".fields").textContent.trim()] = 
            el.querySelector(".values").textContent.trim();
    });
    return obj;
}, yourXPathString);

如果你想 select 基于 CSS 的元素 select 或使用以下内容：

var info = casper.evaluate(function(cssSelector){
    var obj = {};
    __utils__.findAll(cssSelector).forEach(function(el){
        obj[el.querySelector(".fields").textContent.trim()] = 
            el.querySelector(".values").textContent.trim();
    });
    return obj;
}, yourCssSelector);

获取 casper.each 内的子元素

Get child elements within casper.each

javascript

casperjs