js、jQuery实践：拐带web文本

背景

今天无意间想到“既然选择了远方，便只顾风雨兼程”这段词，兴致一来就想找到出处了解一番，于是搜到现代诗歌鉴赏《热爱生命-汪国真》(人教版选修教学案例)，看了看感觉写得还不错。
就在想要复制汪国真这首热爱生命的原文时给我跳出一个需要付费才能进行操作，感觉瞬间就不好了。
可以理解，毕竟这个网站的篇鉴赏的质量还是非常高的，作者创作不易。
嗯，可是我只想要复制原文，鉴赏和介绍本汪没有半点兴趣。

这让我联想到之前访问网页的时候总是有一些网站会在要复制文本内容的时候出现一些弹框，内容无非：限制复制的文本的数量，或者根本不允许复制，更有甚者像这个网站提示需要付费。

当然这些从来都不会对我造成困扰，也没放在心上。毕竟解决的方法总比问题多，嘿嘿。(^_^)
只是刚刚开始接触前端技术，js，jQuery开始上手，就想着用这个来搞点事情。

于是出了这篇笔记。

嗯，没办法，那就从技术角度取这些数据吧，反正复制也不是那么好玩。

开始截取之旅咯

原始粗暴之法

chrome浏览器禁用js拓展，然后c-c，c-v 没有任何提示弹窗啥的。

这个做法实在太low了，来回切换js生效失效好麻烦，效率极地，体验极差

常用的方法

chrome浏览器上面安装一个xpath插件获，然后使用工具来获取文本，讲道理还挺好用的，当然前提是会用，然后还要知道简单使用xpath：

//div[@class='content']/p

JS方法

网页支持js，但是不支持jQuery，此处只以 <p>标签作为示例获取数据。

var a = document.getElementsByTagName("p") 
var c = ""
for (var i = 0; i < a.length; i ++)
 c += a[i].textContent + "\n"
console.log(c);

## 控制台输出效果 

发布时间：2017-10-11
编辑：互联网
手机版 

 热爱生命
汪国真
我不去想是否能够成功
既然选择了远方
便只顾风雨兼程


。。。

jQuery方法

网页支持jQuery，此处只以 <p>标签作为示例获取数据。

var c = ""; 
$("p").each((a,b)=>c+=b.textContent + "\n");
console.log(c);

## 控制台输出效果 

发布时间：2017-10-11
编辑：互联网
手机版 

 热爱生命
汪国真
我不去想是否能够成功
既然选择了远方
便只顾风雨兼程

。。。

都生成文本文件

其实这次到楼上就算是达到个人的目的了，但是身体里还是感觉还不够爽，假如直接生成文本文件，那就很爽了。(^_^)
激动的心,颤抖的手，马上开始动手，从网上找了一个简单的demo，改造了一下，还真可以用。于是几次优化调试之后就整理如下，感觉还是不错的呢！(^_^)

// 声明这个函数即可，原理就是创建一个a标签然后往里面塞入数据，再触发点击事件下载即可。
function download(filename, text) {
    var element = document.createElement('a');
    element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
    element.setAttribute('download', filename);
    element.click();
}

// javaScript版 
var a = document.getElementsByTagName("p") ;
var c = "";
for (var i = 0; i < a.length; i ++)
 c += a[i].textContent + "\n";
// 调用下载方法
download("热爱生命-汪国真.txt", c); 

// 声明这个函数即可，原理就是创建一个a标签然后往里面塞入数据，再触发点击事件下载即可。
function download(filename, text) {
    var a = $("<a>", {
        href:"data:text/plain;charset=utf-8," + encodeURIComponent(text),
        download: filename
    });
    a[0].click();
}

// jQuery版
var c = ""; 
$("p").each((a,b)=> c += b.textContent + "\n");
download("热爱生命-汪国真.txt", c); 

## text文档查看  这就给全文吧，哈哈

发布时间：2017-10-11
编辑：互联网
手机版 

 热爱生命
汪国真
我不去想是否能够成功
既然选择了远方
便只顾风雨兼程
我不去想能否赢得爱情
既然钟情于玫瑰
就勇敢地吐露真诚
我不去想身后会不会袭来寒风冷雨
既然目标是地平线
留给世界的只能是背影
我不去想未来是平坦还是泥泞
只要热爱生命
一切，都在意料之中

。。。

总结

看到网上貌似并没有记录这么玩的资料，现在自己根据网上的y一个demo，以及js API、jQuery API写的比较简单的实现，仅供参考和偷懒的demo。

作为技术人员，既然页面已经在页面呈现了，那么就是说明数据已经到了本电脑上了，和是我们的有啥不一样？占用的内存空间展示的页面的内容不是我们显示器？只是换个形式存储和阅读而已，木有任何侵权的意思哦！(^_^)

这些代码其实不长，但是也花费了本汪将近1.5h的时间，时间有点过长了。另外加上写的时候修修改改的，1个小时又过去了。创作对于本汪来说还真是艰难，诶诶，啥也不说，啥也不是，分享完洗洗睡了。