网页可以非常方便的为我们展示各种信息,如果遇到重要的资料文献,希望在本地电脑上保存下来该怎么操作呢?把网址添加到收藏夹,下次直接打开网址查看,但如果资源被网站删除,就再也找不到了。还是保存在自己电脑里比较放心,那就使用浏览器的保存网页吧,如果保存为单个文件,则只有文字内容,图片丢失了。如果保存所有内容,将产生一个网页文件和一个资源文件夹,包括图片在内的文件都保存在这个文件夹中,由于文件较多不容易归类保存和传输。使用保存网页的方式,除正文外,还会保存网页标题导航栏、信息侧边栏、底部联系信息等无用的内容。

需要保存的网页标题和正文

有没有一种方法,保存网页时,自动智能识别内容标题和正文,且仅保存标题和包括图片在内的正文内容,自动删除网页无效的头尾和侧边内容,更要过滤网页上的广告。这就是“AI保存网页“,如下图所示,打开任意新闻、公告或文章页面,再点击”AI保存网页“,就可以一键保存网页标题和正文。

网页保存后与原页面对比

找到文档保存路径,可以看到以文章标题命名的网页文件。这个文档比较大,是因为同时保存和正文中的图片,也就是说把文字和图片都保存在单个文档中的。且为htm网页格式,可以使用任意浏览器打开。把图片保存在htm网页代码中,是什么原理呢?原来木头浏览器在保存网页时,自动把网页上的图片转换成Base64编码,这样就可以在单个文件中保存图片了。

图片和文字内容保存在一个网页文件中

那么是怎样智能识别文章标题和正文的呢?有js基础的小伙伴可以继续往下看。

首先在项目管理器中,创建一个脚本代码步骤,通过执行一段js脚本代码找出文章标题。首先获取网页头部的title标签作为标题,其次是查找H1元素内容作为标题,如果还是找不到,则查找样式为title的元素内容作为标题。

智能识别网页标题

var title="";
try{title=document.title;//取网页标题}catch{}
if(title==""){//网页标题为空时,查找H1元素内容作为标题var h1s=document.getElementsByTagName("h1");if(h1s.length>0){title=h1s[0].innerText;}
}
if(title==""){//仍未找到标题时,查找样式为title的元素内容作为标题var h1s=document.getElementsByClassName("title");if(h1s.length>0){title=h1s[0].innerText;}
}
title;

再创建一个脚本代码步骤,定义几个重复使用的函数。

function  generateFullXPath(el) {let query = ""while (el && el.nodeType === Node.ELEMENT_NODE) {// 也可以使用nodeName,nodeName包含了tagNamelet component = el.tagName.toLowerCase()let index = this.getElementIndex(el)if (index >= 1) {component += '[' + index + ']'}query = '/' + component + queryel = el.parentNode}return query}    function  getElementIndex(el) {let index = 1let sib = el.previousSiblingwhile (sib) {if (sib.nodeType === Node.ELEMENT_NODE && this.compareTagNameEqual(el, sib)) {index++}sib = sib.previousSibling}if (index > 1) return indexsib = el.nextSiblingwhile (sib) {if (sib.nodeType === Node.ELEMENT_NODE && this.compareTagNameEqual(el, sib)) {return 1}sib = sib.nextSibling}return 0;};/*** 查看两个元素节点名称是否相同*/function compareTagNameEqual(primaryEl, siblingEl) {let p = primaryEl, s = siblingEl// return (p.tagName === s.tagName && (!p.id || p.id === s.id));return (p.tagName === s.tagName)};

同样使用js代码智能识别查找正文元素,一般文章正文部分由多个段落组成,所以我们从P元素入手,找到子元素包含大量P元素的元素,就是正文元素了。如果没有P元素,则获取页面中间位置,面积较大的元素作为正文元素,并给正文元素设置一个id值”mutoubrowser"作为标记。方便后续步骤调用。

智能识别网页正文

var content="";
var fa=null;
var ps=document.getElementsByTagName("p");
if(ps.length>0)
{//取包含P的父元素fa=ps[0].parentElement;while(fa.parentElement.scrollWidth*fa.parentElement.scrollHeight>fa.scrollWidth*fa.scrollHeight){fa=fa.parentElement;}if(ps.length>1){//找到第一个p和最后一个p的共同父元素do{var endfa=ps[ps.length-1].parentElement;var faxpath=generateFullXPath(fa);var endfaxpath=generateFullXPath(endfa);if(faxpath.indexOf(endfaxpath)==0){fa=endfa;break;           }else if(endfaxpath.indexOf(faxpath)==0){break;}else{fa=fa.parentElement;endfa=endfa.parentElement;}}while(true);}
}
else
{//取页面中间最大的元素var w=document.body.clientWidth;var h= document.body.clientHeight;var el=document.elementsFromPoint(Math.round(w/2),Math.round(h/3*2));if(el!=null){var d=0;for(var i=0;i<el.length;i++){var e=el[i];var dd=e.scrollWidth*e.scrollHeight;if(dd>d*1.8){fa=e;}d=dd;}}else{fa=el.document.body;}
}if(fa!=null){    fa.setAttribute("id","mutoubrowser");content=fa.innerHTML;}
content;

再创建一个保存内容步骤,勾选“保存网页内容”,选择“下载图文单个文件”。设置文件名为js变量title,即标题做为文件名,并指定保存文件路径为“D:\文档”。在窗口下方设置正文的元素,通过js代码获得。

保存图文到文件

document.getElementById("mutoubrowser");

最后保存项目文件为“AI保存网页”,通过点击书签按钮运行这个项目,就能智能识别网页标题和正文,保存网页有效内容和图片了。

保存网页内容 自动过滤广告和网页头尾相关推荐

  1. 浏览器老是自动跳出广告垃圾网页

    问题: 不知怎么的前两天上网上着上着,突然浏览器老是跳出广告网页--不是在新打开网页时跳出来,就是间歇性的把整个网页都附上了链接,想要避开都避不开,真是烦死人了. [都是先有一个跳转网页,然后跳到各种 ...

  2. blueMoon (哗--)论坛自动点广告完成星成就自动道具工具

    BlueMoon緋月自动练级器 Blue Moon (哗--)论坛自动点广告完成星成就自动道具工具 目录: 永远赶不上计划的变化 msiecookiejar在大多数情况下是完全不可用的 Eclipse ...

  3. 关键词过滤器-自动挖掘采集关键词,自动过滤关键词

    关键词过滤,什么是关键词过滤.相信每一个做流量的人都知道关键词的重要性,短视频.自媒体.各大流量平台都是离不开关键词的,关键词的重要性.我想大家都知道吧,今天给大家分享一款免费万能关键词工具:自动采集 ...

  4. Chrome 过滤广告插件暂替办法

    由于Chrome暂无广告过滤插件,我们只能通过其他方法是实现Google Chrome的广告过滤. 这里我们需要用到Privoxy这款软件!由于Privoxy是通过本地代理来实现广告过滤的,所以用ch ...

  5. 如何实现扫描二维码自动跳转到网页

    二维码在我们的生活中随处可见,比如扫码付款,扫描进入小程序,扫码关注等等.二维码可以存储各种信息,主要包括网址.名片.文本信息.特定代码等.今天就以QR code二维码为例,教大家使用条码软件生成二维 ...

  6. wps 无法保存html数据,WPS2012保存网页内容怎么用

    WPS2012保存网页内容怎么用 用WPS 2012保存网页内容怎么用,上网冲浪看到精彩文章想保存下来怎么办?选中.复制.运行WORD,粘贴再整理格式?太啰嗦了.用WPS Office 2012文字工 ...

  7. 保存快递公司过滤重复单号查询物流

    怎样批量查询单号物流,能识别快递公司名称吗?重复的单号如何自动过滤出去呢?这里教大家一个自动批量查询的方法.一起来看操作步骤吧. 先准备好单号,运行软件,先进入高级设置,选择好查询的接口,风格等等设置 ...

  8. 教你自动过滤重复单号,一键查询物流

    如何通过快递单号查询物流?比如说在导入快递单号的时候,单号重复了,怎么自动过滤重复单号,并快速查询到全部物流呢?不知道如何操作的宝贝们,下面随小编一起来试试. 需要哪些工具? 快递单号若干 怎么快速查 ...

  9. webview过滤广告终极招式

    首先明白WebViewClient干啥的? 这货用于辅助WebView,处理各种通知.请求等事件 今天就是要重写她的方法! 这里主要交给javascript完成,那么javascript支持一定不能少 ...

最新文章

  1. java基础(参数传递)
  2. 又一次回到追寻梦想的地方
  3. 我是一位老师,讲课是我的乐趣,可是……
  4. 最新开发android版本,Android版本检测升级
  5. Matlab找矩阵中最大最小值的位置
  6. Spring的事务管理难点剖析(4):多线程的困惑
  7. 什么是股票的发行价和市价
  8. linux c libcurl的简单使用
  9. SDL 1.2.14在windows平台下的编译及例子
  10. 奇怪吸引子---LiuChen
  11. Android开机优化之调整Launcher的加载时间
  12. win10电脑忘记开机密码的解锁方法
  13. 【超级有用】大数据的压缩格式
  14. Xilinx FPGA下载mcs文件时的下载配置
  15. whistle启动时,输入命令w2 start报:w2 start‘w2‘ 不是内部或外部命令,也不是可运行的程序或批处理文件。
  16. 已解决:jdk版本冲突,nested exception is java.lang.UnsupportedClassVersionError:JVMCFRE003
  17. pyecharts之参透神剧人物关系
  18. AMiner会议论文推荐第三十五期
  19. leetcode_Permutations II
  20. 少年,暑期学编程可好?

热门文章

  1. Dcloud开发引用第三方sdk的app小程序扫盲---使用第三方sdk并且打包
  2. 宽窄依赖以及shuffle的部分源码理解
  3. 洛谷 P4188 [USACO18JAN]Lifeguards (线段树)
  4. python写完后打不开门_感觉自己python已经入门了,为什么还是没法用Python写好程序?...
  5. C++中的decltype
  6. 沈园恋之沈园诗,自创诗
  7. 在Delphi中很精确地控制生成的WORD文档的格式
  8. Interpro 安装问题
  9. 手动安装 Spyder 4.0 beta 版
  10. 软件测试-朋友圈的点赞功能怎么测?