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

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

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

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

有没有一种方法,保存网页时,自动智能识别内容标题和正文,且仅保存标题和包括图片在内的正文内容,自动删除网页无效的头尾和侧边内容,更要过滤网页上的广告。这就是“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 保存网页”,通过点击书签按钮运行这个项目,就能智能识别网页标题和正文,保存网页有效内容和图片了。

  • 工具

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

    286 引用 • 729 回帖

相关帖子

欢迎来到这里!

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

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

推荐标签 标签

  • Quicker

    Quicker 您的指尖工具箱!操作更少,收获更多!

    32 引用 • 130 回帖 • 2 关注
  • BND

    BND(Baidu Netdisk Downloader)是一款图形界面的百度网盘不限速下载器,支持 Windows、Linux 和 Mac,详细介绍请看这里

    107 引用 • 1281 回帖 • 27 关注
  • AngularJS

    AngularJS 诞生于 2009 年,由 Misko Hevery 等人创建,后为 Google 所收购。是一款优秀的前端 JS 框架,已经被用于 Google 的多款产品当中。AngularJS 有着诸多特性,最为核心的是:MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入等。2.0 版本后已经改名为 Angular。

    12 引用 • 50 回帖 • 474 关注
  • QQ

    1999 年 2 月腾讯正式推出“腾讯 QQ”,在线用户由 1999 年的 2 人(马化腾和张志东)到现在已经发展到上亿用户了,在线人数超过一亿,是目前使用最广泛的聊天软件之一。

    45 引用 • 557 回帖 • 67 关注
  • Pipe

    Pipe 是一款小而美的开源博客平台。Pipe 有着非常活跃的社区,可将文章作为帖子推送到社区,来自社区的回帖将作为博客评论进行联动(具体细节请浏览 B3log 构思 - 分布式社区网络)。

    这是一种全新的网络社区体验,让热爱记录和分享的你不再感到孤单!

    132 引用 • 1114 回帖 • 124 关注
  • 锤子科技

    锤子科技(Smartisan)成立于 2012 年 5 月,是一家制造移动互联网终端设备的公司,公司的使命是用完美主义的工匠精神,打造用户体验一流的数码消费类产品(智能手机为主),改善人们的生活质量。

    4 引用 • 31 回帖 • 4 关注
  • 国际化

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

    8 引用 • 26 回帖
  • Eclipse

    Eclipse 是一个开放源代码的、基于 Java 的可扩展开发平台。就其本身而言,它只是一个框架和一组服务,用于通过插件组件构建开发环境。

    75 引用 • 258 回帖 • 617 关注
  • Logseq

    Logseq 是一个隐私优先、开源的知识库工具。

    Logseq is a joyful, open-source outliner that works on top of local plain-text Markdown and Org-mode files. Use it to write, organize and share your thoughts, keep your to-do list, and build your own digital garden.

    6 引用 • 63 回帖
  • OpenStack

    OpenStack 是一个云操作系统,通过数据中心可控制大型的计算、存储、网络等资源池。所有的管理通过前端界面管理员就可以完成,同样也可以通过 Web 接口让最终用户部署资源。

    10 引用 • 4 关注
  • 大数据

    大数据(big data)是指无法在一定时间范围内用常规软件工具进行捕捉、管理和处理的数据集合,是需要新处理模式才能具有更强的决策力、洞察发现力和流程优化能力的海量、高增长率和多样化的信息资产。

    93 引用 • 113 回帖
  • Chrome

    Chrome 又称 Google 浏览器,是一个由谷歌公司开发的网页浏览器。该浏览器是基于其他开源软件所编写,包括 WebKit,目标是提升稳定性、速度和安全性,并创造出简单且有效率的使用者界面。

    62 引用 • 289 回帖 • 1 关注
  • 星云链

    星云链是一个开源公链,业内简单的将其称为区块链上的谷歌。其实它不仅仅是区块链搜索引擎,一个公链的所有功能,它基本都有,比如你可以用它来开发部署你的去中心化的 APP,你可以在上面编写智能合约,发送交易等等。3 分钟快速接入星云链 (NAS) 测试网

    3 引用 • 16 回帖
  • 前端

    前端技术一般分为前端设计和前端开发,前端设计可以理解为网站的视觉设计,前端开发则是网站的前台代码实现,包括 HTML、CSS 以及 JavaScript 等。

    247 引用 • 1348 回帖
  • 小薇

    小薇是一个用 Java 写的 QQ 聊天机器人 Web 服务,可以用于社群互动。

    由于 Smart QQ 从 2019 年 1 月 1 日起停止服务,所以该项目也已经停止维护了!

    34 引用 • 467 回帖 • 742 关注
  • Kotlin

    Kotlin 是一种在 Java 虚拟机上运行的静态类型编程语言,由 JetBrains 设计开发并开源。Kotlin 可以编译成 Java 字节码,也可以编译成 JavaScript,方便在没有 JVM 的设备上运行。在 Google I/O 2017 中,Google 宣布 Kotlin 成为 Android 官方开发语言。

    19 引用 • 33 回帖 • 63 关注
  • SEO

    发布对别人有帮助的原创内容是最好的 SEO 方式。

    35 引用 • 200 回帖 • 22 关注
  • 服务器

    服务器,也称伺服器,是提供计算服务的设备。由于服务器需要响应服务请求,并进行处理,因此一般来说服务器应具备承担服务并且保障服务的能力。

    125 引用 • 588 回帖
  • abitmean

    有点意思就行了

    29 关注
  • VirtualBox

    VirtualBox 是一款开源虚拟机软件,最早由德国 Innotek 公司开发,由 Sun Microsystems 公司出品的软件,使用 Qt 编写,在 Sun 被 Oracle 收购后正式更名成 Oracle VM VirtualBox。

    10 引用 • 2 回帖 • 6 关注
  • RabbitMQ

    RabbitMQ 是一个开源的 AMQP 实现,服务器端用 Erlang 语言编写,支持多种语言客户端,如:Python、Ruby、.NET、Java、C、PHP、ActionScript 等。用于在分布式系统中存储转发消息,在易用性、扩展性、高可用性等方面表现不俗。

    49 引用 • 60 回帖 • 362 关注
  • CloudFoundry

    Cloud Foundry 是 VMware 推出的业界第一个开源 PaaS 云平台,它支持多种框架、语言、运行时环境、云平台及应用服务,使开发人员能够在几秒钟内进行应用程序的部署和扩展,无需担心任何基础架构的问题。

    5 引用 • 18 回帖 • 167 关注
  • 支付宝

    支付宝是全球领先的独立第三方支付平台,致力于为广大用户提供安全快速的电子支付/网上支付/安全支付/手机支付体验,及转账收款/水电煤缴费/信用卡还款/AA 收款等生活服务应用。

    29 引用 • 347 回帖
  • etcd

    etcd 是一个分布式、高可用的 key-value 数据存储,专门用于在分布式系统中保存关键数据。

    5 引用 • 26 回帖 • 528 关注
  • flomo

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

    5 引用 • 107 回帖
  • C

    C 语言是一门通用计算机编程语言,应用广泛。C 语言的设计目标是提供一种能以简易的方式编译、处理低级存储器、产生少量的机器码以及不需要任何运行环境支持便能运行的编程语言。

    85 引用 • 165 回帖 • 1 关注
  • Openfire

    Openfire 是开源的、基于可拓展通讯和表示协议 (XMPP)、采用 Java 编程语言开发的实时协作服务器。Openfire 的效率很高,单台服务器可支持上万并发用户。

    6 引用 • 7 回帖 • 94 关注