保存网页内容时 自动删除页面头尾广告

本贴最后更新于 675 天前,其中的信息可能已经时移世异

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

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

有没有一种方法,保存网页时,自动智能识别内容标题和正文,且仅保存标题和包括图片在内的正文内容,自动删除网页无效的头尾和侧边内容,更要过滤网页上的广告。这就是“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包含了tagName
            let component = el.tagName.toLowerCase()
            let index = this.getElementIndex(el)
            if (index >= 1) {
                component += '[' + index + ']'
            }
            query = '/' + component + query
            el = el.parentNode
        }
        return query
    }  
  
function  getElementIndex(el) {
        let index = 1
        let sib = el.previousSibling
        while (sib) {
            if (sib.nodeType === Node.ELEMENT_NODE && this.compareTagNameEqual(el, sib)) {
                index++
            }
            sib = sib.previousSibling
        }

        if (index > 1) return index
        sib = el.nextSibling
        while (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 保存网页”,通过点击书签按钮运行这个项目,就能智能识别网页标题和正文,保存网页有效内容和图片了。

  • 工具

    子曰:“工欲善其事,必先利其器。”

    285 引用 • 728 回帖

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...
mutousoft
网页变化监控与自动控制 韶关

推荐标签 标签

  • TGIF

    Thank God It's Friday! 感谢老天,总算到星期五啦!

    287 引用 • 4484 回帖 • 667 关注
  • 30Seconds

    📙 前端知识精选集,包含 HTML、CSS、JavaScript、React、Node、安全等方面,每天仅需 30 秒。

    • 精选常见面试题,帮助您准备下一次面试
    • 精选常见交互,帮助您拥有简洁酷炫的站点
    • 精选有用的 React 片段,帮助你获取最佳实践
    • 精选常见代码集,帮助您提高打码效率
    • 整理前端界的最新资讯,邀您一同探索新世界
    488 引用 • 383 回帖 • 7 关注
  • golang

    Go 语言是 Google 推出的一种全新的编程语言,可以在不损失应用程序性能的情况下降低代码的复杂性。谷歌首席软件工程师罗布派克(Rob Pike)说:我们之所以开发 Go,是因为过去 10 多年间软件开发的难度令人沮丧。Go 是谷歌 2009 发布的第二款编程语言。

    497 引用 • 1387 回帖 • 294 关注
  • 旅游

    希望你我能在旅途中找到人生的下一站。

    90 引用 • 899 回帖 • 1 关注
  • 国际化

    i18n(其来源是英文单词 internationalization 的首末字符 i 和 n,18 为中间的字符数)是“国际化”的简称。对程序来说,国际化是指在不修改代码的情况下,能根据不同语言及地区显示相应的界面。

    8 引用 • 26 回帖 • 1 关注
  • IBM

    IBM(国际商业机器公司)或万国商业机器公司,简称 IBM(International Business Machines Corporation),总公司在纽约州阿蒙克市。1911 年托马斯·沃森创立于美国,是全球最大的信息技术和业务解决方案公司,拥有全球雇员 30 多万人,业务遍及 160 多个国家和地区。

    17 引用 • 53 回帖 • 131 关注
  • Thymeleaf

    Thymeleaf 是一款用于渲染 XML/XHTML/HTML5 内容的模板引擎。类似 Velocity、 FreeMarker 等,它也可以轻易的与 Spring 等 Web 框架进行集成作为 Web 应用的模板引擎。与其它模板引擎相比,Thymeleaf 最大的特点是能够直接在浏览器中打开并正确显示模板页面,而不需要启动整个 Web 应用。

    11 引用 • 19 回帖 • 353 关注
  • Ubuntu

    Ubuntu(友帮拓、优般图、乌班图)是一个以桌面应用为主的 Linux 操作系统,其名称来自非洲南部祖鲁语或豪萨语的“ubuntu”一词,意思是“人性”、“我的存在是因为大家的存在”,是非洲传统的一种价值观,类似华人社会的“仁爱”思想。Ubuntu 的目标在于为一般用户提供一个最新的、同时又相当稳定的主要由自由软件构建而成的操作系统。

    124 引用 • 169 回帖
  • HHKB

    HHKB 是富士通的 Happy Hacking 系列电容键盘。电容键盘即无接点静电电容式键盘(Capacitive Keyboard)。

    5 引用 • 74 回帖 • 465 关注
  • 周末

    星期六到星期天晚,实行五天工作制后,指每周的最后两天。再过几年可能就是三天了。

    14 引用 • 297 回帖
  • 正则表达式

    正则表达式(Regular Expression)使用单个字符串来描述、匹配一系列遵循某个句法规则的字符串。

    31 引用 • 94 回帖
  • MongoDB

    MongoDB(来自于英文单词“Humongous”,中文含义为“庞大”)是一个基于分布式文件存储的数据库,由 C++ 语言编写。旨在为应用提供可扩展的高性能数据存储解决方案。MongoDB 是一个介于关系数据库和非关系数据库之间的产品,是非关系数据库当中功能最丰富,最像关系数据库的。它支持的数据结构非常松散,是类似 JSON 的 BSON 格式,因此可以存储比较复杂的数据类型。

    90 引用 • 59 回帖 • 5 关注
  • OAuth

    OAuth 协议为用户资源的授权提供了一个安全的、开放而又简易的标准。与以往的授权方式不同之处是 oAuth 的授权不会使第三方触及到用户的帐号信息(如用户名与密码),即第三方无需使用用户的用户名与密码就可以申请获得该用户资源的授权,因此 oAuth 是安全的。oAuth 是 Open Authorization 的简写。

    36 引用 • 103 回帖 • 1 关注
  • Git

    Git 是 Linux Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的版本控制软件。

    209 引用 • 358 回帖
  • 心情

    心是产生任何想法的源泉,心本体会陷入到对自己本体不能理解的状态中,因为心能产生任何想法,不能分出对错,不能分出自己。

    59 引用 • 369 回帖 • 1 关注
  • 京东

    京东是中国最大的自营式电商企业,2015 年第一季度在中国自营式 B2C 电商市场的占有率为 56.3%。2014 年 5 月,京东在美国纳斯达克证券交易所正式挂牌上市(股票代码:JD),是中国第一个成功赴美上市的大型综合型电商平台,与腾讯、百度等中国互联网巨头共同跻身全球前十大互联网公司排行榜。

    14 引用 • 102 回帖 • 378 关注
  • sts
    2 引用 • 2 回帖 • 193 关注
  • Sandbox

    如果帖子标签含有 Sandbox ,则该帖子会被视为“测试帖”,主要用于测试社区功能,排查 bug 等,该标签下内容不定期进行清理。

    404 引用 • 1246 回帖 • 579 关注
  • 知乎

    知乎是网络问答社区,连接各行各业的用户。用户分享着彼此的知识、经验和见解,为中文互联网源源不断地提供多种多样的信息。

    10 引用 • 66 回帖
  • ZeroNet

    ZeroNet 是一个基于比特币加密技术和 BT 网络技术的去中心化的、开放开源的网络和交流系统。

    1 引用 • 21 回帖 • 637 关注
  • Latke

    Latke 是一款以 JSON 为主的 Java Web 框架。

    70 引用 • 533 回帖 • 779 关注
  • flomo

    flomo 是新一代 「卡片笔记」 ,专注在碎片化时代,促进你的记录,帮你积累更多知识资产。

    5 引用 • 106 回帖 • 1 关注
  • ActiveMQ

    ActiveMQ 是 Apache 旗下的一款开源消息总线系统,它完整实现了 JMS 规范,是一个企业级的消息中间件。

    19 引用 • 13 回帖 • 668 关注
  • 开源

    Open Source, Open Mind, Open Sight, Open Future!

    406 引用 • 3571 回帖
  • Bootstrap

    Bootstrap 是 Twitter 推出的一个用于前端开发的开源工具包。它由 Twitter 的设计师 Mark Otto 和 Jacob Thornton 合作开发,是一个 CSS / HTML 框架。

    18 引用 • 33 回帖 • 663 关注
  • Swagger

    Swagger 是一款非常流行的 API 开发工具,它遵循 OpenAPI Specification(这是一种通用的、和编程语言无关的 API 描述规范)。Swagger 贯穿整个 API 生命周期,如 API 的设计、编写文档、测试和部署。

    26 引用 • 35 回帖 • 2 关注
  • Netty

    Netty 是一个基于 NIO 的客户端-服务器编程框架,使用 Netty 可以让你快速、简单地开发出一个可维护、高性能的网络应用,例如实现了某种协议的客户、服务端应用。

    49 引用 • 33 回帖 • 19 关注