js、jQuery實踐:拐帶web文本

背景

今天無意間想到“既然選擇了遠方,便只顧風雨兼程”這段詞,興致一來就想找到出處瞭解一番,於是搜到現代詩歌鑑賞《熱愛生命-汪國真》(人教版選修教學案例),看了看感覺寫得還不錯。
就在想要複製汪國真這首熱愛生命的原文時給我跳出一個需要付費才能進行操作,感覺瞬間就不好了。
可以理解,畢竟這個網站的篇鑑賞的質量還是非常高的,作者創作不易。
嗯,可是我只想要複製原文,鑑賞和介紹本汪沒有半點興趣。

這讓我聯想到之前訪問網頁的時候總是有一些網站會在要複製文本內容的時候出現一些彈框,內容無非:限制複製的文本的數量,或者根本不允許複製,更有甚者像這個網站提示需要付費。

當然這些從來都不會對我造成困擾,也沒放在心上。畢竟解決的方法總比問題多,嘿嘿。(^_^)
只是剛剛開始接觸前端技術,jsjQuery開始上手,就想着用這個來搞點事情。

於是出了這篇筆記。

嗯,沒辦法,那就從技術角度取這些數據吧,反正複製也不是那麼好玩。

開始截取之旅咯

原始粗暴之法

chrome瀏覽器禁用js拓展,然後c-cc-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 APIjQuery API寫的比較簡單的實現,僅供參考和偷懶的demo。

作爲技術人員,既然頁面已經在頁面呈現了,那麼就是說明數據已經到了本電腦上了,和是我們的有啥不一樣?佔用的內存空間展示的頁面的內容不是我們顯示器?只是換個形式存儲和閱讀而已,木有任何侵權的意思哦!(^_^)

這些代碼其實不長,但是也花費了本汪將近1.5h的時間,時間有點過長了。另外加上寫的時候修修改改的,1個小時又過去了。創作對於本汪來說還真是艱難,誒誒,啥也不說,啥也不是,分享完洗洗睡了。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章