智能识别和保存文章内容(去广告和边栏)

文档创建者:hlitie
浏览次数:2545
最后更新:2022-12-30
功能分类
数据监测: -
数据录入:  
自动控制:  
人工智能: 智能化应用 
数据接口: 文件读写 
数据分析:  
识别和保存网页标题和正文

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

1、保存网页内容分析

1、保存网页内容分析

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


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

6、网页保存为单个文件

6、网页保存为单个文件


识别文章标题和正文
      那么是怎样智能识别文章标题和正文的呢?有js基础的小伙伴可以继续往下看。
      首先在项目管理器中,创建一个脚本代码步骤,通过执行一段js脚本代码找出文章标题。首先获取网页头部的title标签作为标题,其次是查找H1元素内容作为标题,如果还是找不到,则查找样式为title的元素内容作为标题。

2、获取页面文章标题

2、获取页面文章标题

  1. var title="";
  2. try{
  3.         title=document.title;//取网页标题
  4.    }catch{}
  5. if(title==""){
  6.         //网页标题为空时,查找H1元素内容作为标题
  7.     var h1s=document.getElementsByTagName("h1");
  8.     if(h1s.length>0)
  9.     {
  10.         title=h1s[0].innerText;
  11.     }
  12. }
  13. if(title==""){
  14.         //仍未找到标题时,查找样式为title的元素内容作为标题
  15.     var h1s=document.getElementsByClassName("title");
  16.     if(h1s.length>0)
  17.     {
  18.         title=h1s[0].innerText;
  19.     }
  20. }
  21. title;
复制代码

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

3、函数定义

3、函数定义

  1. function  generateFullXPath(el) {
  2.         let query = ""
  3.         while (el && el.nodeType === Node.ELEMENT_NODE) {
  4.             // 也可以使用nodeName,nodeName包含了tagName
  5.             let component = el.tagName.toLowerCase()
  6.             let index = this.getElementIndex(el)
  7.             if (index >= 1) {
  8.                 component += '[' + index + ']'
  9.             }
  10.             query = '/' + component + query
  11.             el = el.parentNode
  12.         }
  13.         return query
  14.     }   
  15.    
  16. function  getElementIndex(el) {
  17.         let index = 1
  18.         let sib = el.previousSibling
  19.         while (sib) {
  20.             if (sib.nodeType === Node.ELEMENT_NODE && this.compareTagNameEqual(el, sib)) {
  21.                 index++
  22.             }
  23.             sib = sib.previousSibling
  24.         }

  25.         if (index > 1) return index
  26.         sib = el.nextSibling
  27.         while (sib) {
  28.             if (sib.nodeType === Node.ELEMENT_NODE && this.compareTagNameEqual(el, sib)) {
  29.                 return 1
  30.             }
  31.             sib = sib.nextSibling
  32.         }
  33.         return 0;
  34.     };
  35.    
  36.    
  37.         /**
  38.      * 查看两个元素节点名称是否相同
  39.      */
  40.    function compareTagNameEqual(primaryEl, siblingEl) {
  41.         let p = primaryEl, s = siblingEl
  42.         // return (p.tagName === s.tagName && (!p.id || p.id === s.id));
  43.         return (p.tagName === s.tagName)
  44.     };
复制代码

      同样使用js代码智能识别查找正文元素,一般文章正文部分由多个段落组成,所以我们从P元素入手,找到子元素包含大量P元素的元素,就是正文元素了。如果没有P元素,则获取页面中间位置,面积较大的元素作为正文元素,并给正文元素设置一个id值”mutoubrowser"作为标记。方便后续步骤调用。
  1. var content="";
  2. var fa=null;
  3. var ps=document.getElementsByTagName("p");
  4. if(ps.length>0)
  5. {//取包含P的父元素
  6.     fa=ps[0].parentElement;
  7.     while(fa.parentElement.scrollWidth*fa.parentElement.scrollHeight>fa.scrollWidth*fa.scrollHeight)
  8.     {
  9.             fa=fa.parentElement;
  10.     }
  11.    
  12.     if(ps.length>1)
  13.     {//找到第一个p和最后一个p的共同父元素
  14.             do{
  15.                     var endfa=ps[ps.length-1].parentElement;
  16.                     var faxpath=generateFullXPath(fa);
  17.                     var endfaxpath=generateFullXPath(endfa);
  18.                     if(faxpath.indexOf(endfaxpath)==0)
  19.                     {fa=endfa;
  20.                             break;                    
  21.                     }
  22.                     else if(endfaxpath.indexOf(faxpath)==0)
  23.                     {
  24.                            
  25.                             break;
  26.                     }
  27.                     else
  28.                     {
  29.                             fa=fa.parentElement;
  30.                             endfa=endfa.parentElement;
  31.                     }
  32.             }while(true);
  33.     }
  34. }
  35. else
  36. {//取页面中间最大的元素
  37.         var w=document.body.clientWidth;
  38.         var h= document.body.clientHeight;
  39.         var el=document.elementsFromPoint(Math.round(w/2),Math.round(h/3*2));
  40.         if(el!=null){
  41.                 var d=0;
  42.                 for(var i=0;i<el.length;i++){
  43.             var e=el[i];
  44.             var dd=e.scrollWidth*e.scrollHeight;
  45.             if(dd>d*1.8)
  46.             {
  47.                 fa=e;
  48.             }
  49.             d=dd;
  50.             }
  51.         }
  52.         else
  53.         {
  54.                 fa=el.document.body;
  55.         }
  56. }
  57.         if(fa!=null)
  58.         {   
  59.                 fa.setAttribute("id","mutoubrowser");
  60.             content=fa.innerHTML;
  61.            }
  62. content;
复制代码

4、智能识别正文

4、智能识别正文

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

5、保存正文件到文件

5、保存正文件到文件


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


您需要登录后才可以回帖 登录 | 现在注册

本版积分规则

返回顶部 返回列表