js 抓取网页内容( 如何提取，或者说识别不同网页里的内容主体？(组图) )

　　js 抓取网页内容(

如何提取，或者说识别不同网页里的内容主体？(组图)

)

　　由于兴趣和技术的不同，互联网上充斥着大量不友好的网页内容。对于阅读内容的人来说，很多东西是不需要的，例如：页眉、菜单、导航，甚至评论，还有那个该死的广告。再加上布局、字体、字体大小/颜色、背景颜色等，很多因素都会大大降低你的阅读体验。因此，一个好的阅读模式是非常有必要的。那么，如何提取或识别不同网页中的内容主体呢？这就是本文要讲的内容。

　　1. Safari 阅读器

　　Safari很早就有了阅读模式（不知道多久了），为移动端提供阅读支持。Github有它的处理JS代码（听说取自Safari），2010年的代码。

　　1.1 简单原理

　　Safari阅读器会根据页面高宽计算页面上的9个点，如下图：

　　然后根据点的坐标，使用document.elementFromPoint()得到dom对象，然后向上遍历父节点，根据节点类型和样式值给节点打分（有打分方法），找到样式相同且数量最多的节点，将其视为内容的主题。

　　其实这样的判断方法并没有错，但是还是有相当一部分页面内容无法识别。虽然提供了代码的源码版本，但其实压缩后的代码只是格式化了，一些核心代码还是比较难看懂。

　　2. 菲卡

　　Fika 是一个提供阅读模式的 Chrome 扩展程序。开始用的是Safari Reader JS，但是发现识别率太低，换成了自己的实现。

　　2.1 简单原理

　　Fika 认为大部分内容体会集中在 H、p、pre、code、figure 等大量元素上，所以以此为基准获取网页的 dom 中所有对应的元素，然后向上遍历父节点。但它只会查找2-3层，对这2-3层进行评分，越远，如果属性收录内容/文章等附加点，分数越低。得分最高的，它考虑内容主体。这样可以找到更多的内容体，在目前比较规范的页面结构下准确率还是相当不错的。

　　2.2 个问题

　　如前所述，Fika目前只根据指定的Element获取内容，所以如果任何网页的内容体都是DIV元素，则无效。而且，虽然找到了主体，但是主体里面的很多元素还是没有用的，比如：分享、广告、表格等。虽然Fika做了一些排除，但是这部分还是有很大的失败概率的。虽然影响不如 Safari Reader JS 大，但仍然不完美。

　　2.3 改进

　　首先，移除指定的元素，在遍历dom树的时候，判断标准在元素中改为#text、img、h、pre、code、figure等。如果找到，将对父节点进行评分。那么内容越集中，自然是内容的主体。那么如何摆脱问题中的元素呢？

　　这样做之后，肯定会比之前有很大的提升。但想要完美是不现实的。Fika想要做的是，你可以打开任意一个网站，点击Fika，就能得到比较理想的阅读体验。

　　结尾

　　在千页千页的互联网上，内容主体的判断还是过于理想。如果所有的网站页面都是按照HTML定义的标准来构建的，它会很好用，但是标准永远不会强制执行，而且还有很多网页在没有标准的情况下已经上线了，所以内容属性的最终修正也是一个必要的过程，但100%估计是永远达不到的上限。

　　Fika 阅读器模式