📄 Concise selector to extract JSON from HTML.
Clone or download

readme.md

Build Status Coverage Status NPM Package Node Version Requirement VSCode Extension Example Fangwen Example Douban Movie

English Version

temme

temme 是一个类 jQuery 的选择器,用于简洁优雅地从 HTML 文档中提取所需的 JSON 数据。

相关链接

👉中文文档

👉在线版本

👉VSCode 插件

👉反馈 / 疑问

👉升级指南

例子

<!-- 下面用到的 html 的内容 -->
<ul>
  <li data-fruit-id="1">
    <span data-color="red">apple</span>
  </li>
  <li data-fruit-id="2">
    <span data-color="white">pear</span>
  </li>
  <li data-fruit-id="3">
    <span data-color="purple">grape</span>
  </li>
</ul>

对于上面的 html,我们可以使用下面的 temme 选择器来提取「水果颜色和名称的列表」。(在线版本链接

import temme from 'temme'

const selector = `li@fruits {
  span[data-color=$color]{$name};
}`
temme(html, selector)
//=>
// {
//   "fruits": [
//     { "color": "red", "name": "apple" },
//     { "color": "white", "name": "pear"  },
//     { "color": "purple", "name": "grape" }
//   ]
// }

如果你对 temme 还不熟悉,那么可以从 豆瓣电影的例子 开始。在线版本中也包含了一些其他较短的例子。比如这个例子从豆瓣电影页面中抓取了电影的基本信息和评分信息。这个例子从天猫的商品详情页面中抓取了评论列表,包括用户的基本信息,初次评价和追加评价, 以及晒的照片的链接.

文档链接

升级指南:从 0.7 升级到 0.8

0.8 版本的更新较大,主要是引入了 modifier 特性,同时原来的 content 机制改为 procedure 机制。同时,类 CaptureResult 也得到了大幅简化,详见 CaptureResult 文档。

如果你仍需要老版本的文档,可以在这里可以找到

1. content/procedure 仅支持单个 part

content/procedure 不再支持多个 part,想要使用多个 part,需要写成多个选择器的形式:

const prev = `div{ $text; find('foo', $bar); }`
const current = `
  div{ $text };
  div{ find('foo', $bar) };
`

2. 特殊 filters 被移除

procedure 中不再提供「特殊 filters」,但提供了对应的内置 procedure。你需要将「特殊 filters」换成对应的 procedures:

const prev = `
  div{ $t|text };
  div{ $h|html };
  div{ $n|node };
  div{ $o|outerHTML };
`
const current = `
  div{ text($t) };
  div{ html($h) };
  div{ node($n) };
  // 暂无 outerHTML procedure
`

注意:因为 outerHTML 这个 API 本身就有些奇怪,所以 temme 中暂时没有提供 outerHTML procedure。如果需要 outerHTML 的话,请使用 JavaScript API 进行获取。

3. filter nth 被移除

请使用 filter get