temme-temme在命令行中的用法.js网页爬虫

　　temme-temme在命令行中的用法.js网页爬虫

　　Temme 是一个用于从 HTML 中提取 JSON 数据的选择器。它在CSS选择器语法的基础上增加了一些额外的语法，实现了多字段爬取、列表爬取等功能。它适用于节点。 js 网络爬虫。上一专栏文章介绍了命令行中temme选择器的用法。本文文章将以更直观的方式介绍选择器。

　　从名字可以看出，vscode-temme是temme的vscode插件。实际使用效果如下图所示。 （大图戳我）

　　上图展示了使用该插件抓取方文社番剧列表的*敏*感*词*。爬取的结果是一个列表，每个列表元素收录id、节目名称、图片链接、评分等信息。下图展示了网页的页面结构和对应的 CSS 选择器。这些选择器也出现在术语选择器中。如果你熟悉 CSS 选择器，通过对比上下两张图就很容易理解每​​个选择器的含义了。

　　完整的分步说明

　　以下四个步骤将用于解释*敏*感*词*中的操作流程。

　　第一步

　　打开vscode编辑器，安装插件（插件市场搜索temme，安装前可能需要将编辑器升级到最新版本），打开temme文件（可以下载上图中的文件）。打开命令面板，选择Temme：开始观看，然后选择。插件会根据链接下载HTML文档。下载完成后，插件会进入观看模式，编辑器状态栏中会出现⠼ temme：观看。在监视模式下，每次选择器发生变化时，插件都会重新执行选择器并更新输出。这样我们就可以愉快的编辑选择器了。

　　第二步

　　用浏览器打开方文社的剧目列表，可以看到上图所示的页面。我们要抓取的粉丝剧信息列表位于ul#browserItemList对应的元素（棕色）中，每一个粉丝剧信息对应一个li元素（绿色）。写下这两个选择器并在末尾添加@list 表示抓取li 列表。为了指定在每个 li 元素中抓取什么内容，我们还需要添加一串花括号来放置子选择器。我们得到以下选择器：

　　ul#browserItemList li@list {/* 子选择器会出现在这里 */ }

　　第三步

　　上图中有五个子选择器，每个子选择器抓取一个对应的字段。下面我们就一一分析：

　　&[id=$id];表示将父元素（即li元素）的id特征捕获到结果的id字段中。 & 符号表示父元素引用，与 CSS 预处理器 (Less/Sass/Stylus) 中的含义相同。 .inner a{$name} 表示将.inner a 对应的元素的文本抓取到结果的name 字段中。 img[src=$imgUrl] 表示将img对应元素的src特征抓取到结果的imgUrl字段。 CSS选择器中，img[src=imgUrl]表示选择src为imgUrl的那些img元素； $符号被添加到temme，它的含义变成了capture。这个语法很容易记住 (o´ω`o )。 .fade{$rate|Number} 类似于 2，但有一个额外的 |Number 将结果从字符串转换为数字。 .rank{$rank|firstNumber} 与4类似，但这里firstNumber是一个自定义过滤器，用于获取字符串中的第一个数字，过滤器定义在选择器文件下方。

　　第四步

　　我们不仅可以在$xxx之后添加过滤器来处理数据字段，还可以在@yyy之后添加过滤器来处理数组。 sortByRate 和 rateBetween 是两个自定义过滤器。前者按评分对同人剧列表进行排序，后者用于选择收视率在一定范围内的同人剧。当我们应用这两个过滤器时，我们可以看到右侧的 JSON 数据也会发生相应的变化。自定义过滤器的定义方法与 JavaScript 函数定义方法相同，只是将关键字从函数更改为过滤器。请注意，您需要在自定义过滤器中使用它来引用捕获的结果。

　　插入破碎的想法

　　插件将突出显示与模式匹配的文本 // 链接，我们称之为 tagged-link。 link 可以是 http 链接或本地文件路径。因为插件下载HTML功能比较简单，所以我推荐先使用插件vscode-restclient下载网页文档，然后使用本地路径启动temme watch模式。此外，要在编辑器中执行 temme 选择器，文件中必须至少存在一个标记链接。

　　除了提供语法高亮，插件还会报告选择器语法错误。在watch模式下，因为selector在不断的执行，插件也会报运行时错误，但是插件还没有完成。运行时错误总是显示在文件的第一行，但应该没有问题。

　　选择器坏了。

　　基于 CSS 选择器语法，在 temme 中没有太多需要记住的。一般来说，记住以下几点就足够了： $ 表示捕获字段，@ 表示捕获列表，|xxx 表示应用过滤器处理结果，一个分号；需要结束选择器。 temme的其他语法和功能请参考GitHub文档。

　　Temme 发布在 NPM 上，使用 yarn global add temme 全局安装 temme；将选择器保存在文件bangumi.temme中，那么上面的例子也可以在命令行运行：

　　url=http://bangumi.tv/anime/tag/%E8%8A%B3%E6%96%87%E7%A4%BE/?sort=date

curl -s $url | temme bangumi.temme --format

　　当然，我们也可以在 Node.js 中使用 temme。一般来说，对于每个不同的网页结构，我们可以先使用插件来调试选择器；爬虫运行时，下载HTML文档，我们可以直接执行相应的选择器，使爬虫开发效率大大提高。推广。

　　印象和总结

　　选择合适的工具可以提高工作效率；汇编的原则很重要也很有用。最后感谢大家的阅读(๑¯◡¯๑).