Distill 中的 JavaScript 选择符

Distill 的选择符，除了支持Xpath和CSS外，还支持 JavaScript 自己写代码。所以可以非常强大。有些监控任务，用Distill内置的选择符和条件，无法完成（比如要排序），不妨试试用JavaScript处理。


但使用时有些要点，官方文档没说太清楚：

• 把结果返回给Distill的方式有两种

1. 最后一个语句，作为表达式，返回一个List
2. 调用sendResponse(null, listOfElements)
   

• 返回的必须是一个对象List。
  比如返回数组，数组里的每个元素都必须是对象，而不能是字符串等基本类型。几个例子：

1. List of all links:
   $('a') // matches and returns list of all links
2. Monitor hrefs instead of links' text:
   $('a').each((x,a) => $(a).text(a.href))
3. Create a new div and set text computed from other elements in the page:
   $html = $('<div />');
   $html.text('Item 1 - Item 2 - Item 3'); // Or append child elements to $html
   $html.appendTo(document.body);

• 要直接修改DOM。把DOM外的List返回给Distill是无效的
  比如下面的代码是无效的，因为返回的数组arr，在DOM之外：

  var nodes = document.evaluate("//th/span[@class='xi1']/preceding-sibling::a[1]", document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null) var arr = [] for (var i=0; i < nodes.snapshotLength; i++) {
    arr.push( nodes.snapshotItem(i) );
  }
  arr.sort( (a, b) => a.textContent.localeCompare(b.textContent) );

  
  必须修改成这样，返回DOM中的List才可以：

  var nodes = document.evaluate("//th/span[@class='xi1']/preceding-sibling::a[1]", document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null) var arr = [], $html
   = $('<div />'); for (var i=0; i < nodes.snapshotLength; i++) {
    arr.push( nodes.snapshotItem(i) );
  }
  arr.sort( (a, b) => a.textContent.localeCompare(b.textContent) );
  arr.forEach(el => $html.append(el.cloneNode(true)));
  $html.appendTo(document.body);

bootislands：论坛编辑器的插入代码，好像不管用回到原帖

https://www.firefox.net.cn/read-54064

论坛编辑器的插入代码，好像不管用

图片：snipaste20170320_163132.png