自己用javascript写了一些代码，用来批量下载“绝影”博客上《疯狂的程序员》文章...

最新推荐文章于 2022-03-30 22:43:56 发布

最新推荐文章于 2022-03-30 22:43:56 发布 · 428 阅读

文章标签：

#JavaScript #IE #浏览器 #Firefox #HTML #ViewUI

小技术小技巧专栏收录该内容

27 篇文章

订阅专栏

本文介绍了一位程序员如何利用简单的JavaScript脚本从特定博客自动抓取文章内容并整合成单一文件的过程。

近日，在拜读了“绝影”博客上《疯狂的程序员》连载文章后，感触颇深，从他的文章里找了自己的人生记忆，仿佛其中的主角就是自已…..

可是，由于白天要上班，晚上回家了也很晚，没多少空闲时间看，想来想去，最后决定将文章下下来，做成txt格式放到手机上看，反正每天上下班都有差不多两个小时，够我看的了。

问题来了，如果我是用手工的方式去一页一页的复制、粘贴。。。这工作量是不是也太大了，况且自己还身为一名“程序员”，感觉总有点怪怪的。又不想上网找那种可以下载网页的软件。最后想想，反正这难度应该不大，自己动手写个小程序试试，不成功也就当是练习练习吧。

接下来，开始分析需求。其实很简单，就是输入博客的网址，然后得到当前页面当中的所有文章的超链接，再根据这个链接去读取每篇文章的内容，把内容全部显示到一个网页里，然后就只需要复制一次就可以将所有的内容copy下来了。

开始写代码，这里碰到了一个问题，本想一次性将所有的链接全部得到，然后通过循环的方式去读取每个链接所对应的网页内容。可是当我真正去实现的时候出现了一个无法访问的错误，打开了一个优快云用户登录页面。不知道是什么原因，猜想是人家网站不让你这样去弄吧，也没多想。此路不行，换条路。打开其中的一个链接，看了一下结构，发现每篇文章上面都有一个链接可以查看下一篇文章的内容，既然如此那我就可以通过读取这个链接得到下一篇文章的网页了。通过不断的循环，应该可以一直不断的得到后面的网页。

思路理清了，就开始写代码吧

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript">
        //获取网页内容，经过处理后将内容写入到指定的div当中
        function getPage(url){
            var xmlhttp = createXmlHttp();                      //获取xmlhttp对象
            var all_yk = document.getElementById("all_yk");    //得到用于保存网页的div
            if(url == null || url == "") {
                alert("网址不能为空！");
                return;
            }else {
                xmlhttp.open("GET",url,false);
                xmlhttp.send();
                if(xmlhttp.readyState ==4) {
                    if(xmlhttp.status != 200) {
                        alert("连接失败！");
                        return;
                    }else {
                        /*
                            这里通过xmlhttp对象读取了网页后，将内容写入到all_yk这个div当中，
                            这里面的内容其实就是包含所有内容的网页源代码。
                            由于div的样式已设置不显示，所以我们在网页是看不到的。
                         */
                        all_yk.innerHTML=xmlhttp.responseText;
                        //这个用来提取我们需要数据，获取文章的内容就看它了
                        getText();
                    }
                }
            }
        }

        //定义一个计数器，通过此计数器，我们可以设置要访问的级数
        var count=1;
        //从指定的div当中获取需要的数据
        function getText() {
            var temp_yk = document.getElementById("temp_yk");
            //下一页的超链接
            var nextHREF;
            if(document.getElementById("Post.ascx_ViewPost_PreviousAndNextEntriesUp")){
                /*
                    这里的id是通过分析网页源代码得到的，大家可以自己去查看博客上的网页源代码就知道了
                    得到了这个节点对象我们就可以缩小查找范围，只需要得到这个节点的第一个<a>元素的href属性
                    就可以获取下一篇文章的链接了，再将链接保存到变量当中，用于下一次getPage()方法的运行,
                    如此循环即可以不断的得到不同的文章内容
                 */
                 var nextURLS =document.getElementById("Post.ascx_ViewPost_PreviousAndNextEntriesUp");
                    nextHREF=nextURLS.getElementsByTagName("a")[0].getAttribute("href");
            }

            /*
             *这段代码用来获取我们需要的文章内容，同样通过分析源代码，所有的文章内容都位于一个id=csdnblog_content
              的div节点当中，我们只需要判断一下这个div是否存在，就知道有没有文章内容了。同理，再分析源码得知所有的文章每一段
               都位于一个<p>节点当中，而且这个<p>节点都一个相同的class属性，既然如此，那么我们可以通过获取当前页面当中的所有
               <p>节点，然后循环这个集合，判断其中的每一个节点的class属性是否等于“MsoNormal”，就可以得到文章的具体内容。
               最后将每一段内容添加到temp_yk这个div节点当中。如此循环就可以将我们需要的内容获取到了。
             */
            if(document.getElementById("csdnblog_content")){
                var allP = document.getElementsByTagName("p");
                for(var i=0;i<allP.length;i++) {
                    if(allP[i].className=="MsoNormal") {
                        temp_yk.innerHTML+=allP[i].innerHTML+"<br>";
                    }
                }
            }

            /*
                由于链接比较多，而且读取网页的速度不是很快，同时为避免出现假死机的现象，
                我们在这里设置了读取网页级数的数量。这个数量指的是从当前网页算起，向下
                读取多少次的数量。如本文是10,如果我是从第一章开始，则在读完了第10章后，
                程序不在运行
             */

            if(count <10) {
                  count++;
                //我们可以在这里设置一个标识，用来区分每一章的内容（可要，可不要）
                temp_yk.innerHTML+="**********************<p>";
                 getPage(nextHREF);
             }

        }

        //获取所有超链接
        function getAllHref(){
            var url = document.getElementById("url").value;
            getPage(url);   //读取当前页面当中的所有内容，然后进行分析
            var all_yk = document.getElementById("all_yk");
            var book_contents = document.getElementById("book-contents").innerHTML;
            all_yk.innerHTML=book_contents;
            var as =document.getElementsByTagName("a");
            for(var i=0;i<10;i++) {
                var nextUrl =as[i].getAttribute("href");
                getPage(nextUrl);
            }
        }

        function clearURL() {
            document.forms["getText"].reset();
            document.getElementById("all_yk").innerHTML="";
            //查看动态生成的源代码
            //document.write(document.documentElement.outerHTML);
        }

        //创建xmlhttp对象
        function createXmlHttp() {
{          var xhr;
            if (window.ActiveXObject)   // IE下创建XMLHTTPREQUEST
            {
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }
            else if (window.XMLHttpRequest)   // 其他浏览器创建XMLHTTPREQUEST
            {
                xhr = new XMLHttpRequest();
            }
            return xhr;
        }

}
    </script>

</head>
<body style="font-size:12px;">
<form action="test.html" name="getText">
<table align="center">
    <tr>
        <td>请输入要读取的网址:</td>
    </tr>
    <tr>
        <td><input type="text" id="url" size="90" name="url"><a href="#" onclick="getPage(url.value)" >读取</a>
            <input type="button" value="清空" onclick="clearURL()" id="clear"/></td>
    </tr>

</table> </form>
<!--用于临时保存网页内容，id名字没取好-->
<div id="all_yk" style="display:none;"></div>
<!--用于保存最后的结果内容，id名字没取好-->
<div id="temp_yk" style="display:block;"></div>
<!--临时保存下一篇文章的超链接-->
<div id="a_yk" style="display:none;"></div>

</body>

</html>

弄个效果图：