从网页抓取数据(temme-temme在命令行中的用法.js网页爬虫)

　　从网页抓取数据(temme-temme在命令行中的用法.js网页爬虫)

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

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

　　上图为使用本插件抓取芳文沙番剧列表的*敏*感*词*。爬取的结果是一个列表，每个列表元素收录id、剧名、图片链接、评分等信息。下图显示了网页的页面结构和相应的 CSS 选择器，它们也出现在 temme 选择器中。如果你熟悉 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 在这里添加了 $ 符号，它的意思变成了捕获，这个语法很容易记住（o´ω`o）。.fade{$rate|Number} 类似于 2，但添加了 |Number 以将结果从字符串转换为数字。.rank{$rank|firstNumber} 类似于 4，

　　第四步

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

　　插件

　　该插件将突出显示匹配模式 // 链接的文本，我们称之为标记链接。link 可以是 http 链接，也可以是本地文件路径。因为插件下载HTML的功能比较简单，所以我推荐先使用插件vscode-restclient下载web文档，然后使用本地路径启动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文档时，我们可以直接执行相应的选择器，从而大大提高了爬虫的开发效率。推动。

　　思考与总结

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