javascript - 获取 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 源代码(又名 html 的值)如下:

循环 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 格式错误，并且包含大量空格。

我想要获取的数据是:

• 电话:12345678
• 紧急电话:23456789(紧急)
• 开放时间:9:00am-6:30pm(平日)/周日及公众假期休息(可预订)(节假日)
• 最后更新:2014 年 11 月 6 日

尝试过正则表达式，但正则表达式太复杂。

Answer 1

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

CasperJS 提供了一个辅助函数，用于通过 XPath 与 __utils__.getElementsByXPath() 匹配 DOM 节点通过始终自动插入的 ClientUtils 模块。该函数的结果是一个数组，因此适用正常的 forEach() 模式。 DOM 节点可用作上下文节点，用于使用 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);

如果您想基于 CSS 选择器选择元素，请使用以下命令:

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