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

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

)

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

　　1. Safari 阅读器

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

　　1.1 简单原理

　　Safari Reader 会根据页面的高度和宽度计算页面上的 9 个点，如下图：

　　然后，根据点的坐标，使用document.elementFromPoint()获取dom对象，然后向上遍历父节点，根据节点类型和样式值对节点进行打分（有打分方法），并找到样式相同且编号最大的节点。将其视为内容的主体。

　　其实这种判断方式并没有什么问题，但是还是有相当一部分页面内容无法识别。很难说为什么不承认这一点。虽然提供了源代码版本，但实际上只是对压缩后的代码进行了格式化，部分核心代码仍然难以阅读理解。

　　2. 菲卡

　　Fika 是一个提供阅读模式的 Chrome 扩展。它从Safari Reader JS开始，但是当它发现识别率太低时，它用自己的实现代替了它。

　　2.1 简单原理

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

　　2.2 个问题

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

　　2.3 改进

　　首先，删除指定的元素。遍历dom树时，判断标准改为#text、img、h、pre、code、figure等内容的主体部分。如何删除问题中的元素？

　　经过这次的治疗，肯定会比之前有很大的改善。但是想要完美是不现实的。Fika 想要做的是，你可以打开一个 网站 并点击 Fika 以获得相对理想的阅读体验。

　　结尾

　　在千页万面的互联网上，对内容主体的判断还是过于理想化。如果所有的网站页面都按照HTML定义的标准构建，效果会很好，但是这个标准不会被任何人执行，很多网页在没有标准的时候就已经上线了。所以，内容属性的最终修改也是一个必要的过程，但100%估计是一个永远也达不到的上限。

　　Fika - 阅读器模式