Selector 规则

规则基于Cheerio的简化版本，底层是基于 XPath 解析网站内容 dom 节点，模拟了 css 的选择器和 jQuery 的链式操作。目的是尽可能简化 xpath 的节点操作，降低开发成本。

Cheerio 已集成到 app 运行时环境(v2.6.2)，最终打包小组件无需另外引入，可以直接初始化引入：

// widget.js
const Cheerio = require("@agcplayer/core/cheerio");
const cheerio = new Cheerio();

const $ = cheerio.load(`html string`);

小组件目录结构

小组件文件夹应包含以下内容：

selector-widget.zip
├── widget.json
├── widget.js
└── icon.png

文件说明

  • widget.js：所有业务逻辑代码，包括数据层用到的 home() detail() search() play() 约定数据结构，可以参考这个示例。

Cheerio 已复刻方法

💡 这里只是参考了 cheerio 的基础用法，并非完整搬运了官方的库，需要常用缺少的方法可以在官方讨论群或者论坛提

load()

初始化页面 | 传入页面字符，返回实例

const $ = cheerio.load(
  '<div id=test>\n  <div><p>Hello</p></div>\n  <div><p>World</p></div>\n</div>',
);
$('#test p').unwrap();

//=> <div id=test>
//     <p>Hello</p>
//     <p>World</p>
//   </div>
unwrap()

移除元素的父节点，但保留自身在原来的位置

const $ = cheerio.load(`
<div class="wrap">
  <span>hello</span>
</div>
`);

$('.wrap span').unwrap();
// => <span>hello</span>
find()

查找元素 | 支持 class/id + ~ > 等常见 css 选择器

$('#fruits').find('li').length;
//=> 3
$('#fruits').find($('.apple')).length;
//=> 1
attr()

查找元素 | 支持 class/id + ~ > 等常见 css 选择器

$('ul').attr('id');
//=> fruits
first()

获取元素第一个节点

$('ul > li').first().text();
//=> fruits
last()

获取元素最后一个节点

$('ul > li').last().text();
//=> fruits
eq()

获取元素指定下标节点

$('ul > li').eq(2).text();
//=> fruits[2]
text()

获取元素的内容

$('.example').text();
//=> fruits
val()

获取input/textarea/select表单组件值

$('textarea').val();
//=> fruits
prop()

.prop() 是操作节点的真实状态（如 checkbox 是否被勾选） 支持outerHTML 和 innerHTML 用法

$('input[type="checkbox"]').prop('checked');
//=> false

$('input[type="checkbox"]').prop('checked', true).val();
//=> ok

cosnt str = `<li class="pear fruit">Pear</li>`;
$('.pear').prop('outerHTML');
//=> <li class="pear fruit">Pear</li>
.map()

map方法，可以返回单个数据项或要插入结果集中的一系列数据项，如果该函数返回null或未定义，则不会插入任何元素

$('li')
  .map(function (i, el) {
    // this === el
    return $(this).text();
  })
  .toArray()
  .join(' ');
//=> "apple orange pear"
data()
  • 支持读取任意 data-* 属性；
  • 自动处理布尔值、数字、null、JSON 等类型（模仿 jQuery）；
  • 如果值为普通字符串，原样返回
  • .data() 无参数时，返回所有 data 属性组成的对象
$('<div data-apple-color="red"></div>').data('apple-color');
//=> 'red'

本地开发

需要在工程根目录下自行构建开发环境，引入nodejs的cjs/esm包 cheerio 调试：

npm init && npm install cheerio;

// ESM，打包需要去掉
import * as Cheerio from 'cheerio';

// CommonJS，打包需要去掉
const Cheerio = require('cheerio');

// 业务代码……
const cheerio = new Cheerio();
const $ = cheerio.load(`html string`);
// BALABALA

本地打包

💡本地打包小组件需要去掉esm/commonjs引入的cheerio包

源码包和示例demo

下载

最近更新：: