使用Chrome console提取頁面數據

使用Chrome console提取頁面數據

1、需求介紹

　　在做課題研究的過程中，遇到這樣一個問題，有一個頁面中包含很多IP地址，需要把這些IP地址提取出來保存到文件中。如下圖所示：

 

　　一開始的做法是一個個選中然后復制到.txt中，這樣未免也太多繁瑣，因此想到使用前端的工具進行提取。

2、實例

 　　首先按F12鍵，打開控制台面板；定位到我們所需要數據的標簽；

 

 　　然后控制台輸入以下代碼：這樣就把IP地址提取出來了，選中復制即可。

//方法1：獲取標簽提取
var ip = document.getElementsByClassName("ip"); var str; for(var i=0;i<ip.length;i++) { var node = ip[i].firstChild; str+="\n"+node.innerHTML; } console.log(str); //方法2：正則提取
var tag = document.getElementsByClassName("span9")[0]; var re = new RegExp(); var str = tag.innerHTML; var re = /\d+\.\d+\.\d+\.\d+/g; var arr = str.match(re); console.log(arr); //數組去重
arr.sort(); for(var i = 0; i < arr.length-1;) { //用當前的元素與他的前一個元素進行對比
    if(arr[i] == arr[i + 1]) { //如果相同的話,就刪除掉第i個元素
        arr.splice(i, 1); }else{ i++;} } console.log(arr);

3、Chrome concole介紹

console.clear(); //清空控制台信息
console.group(); //輸出一組信息的開頭
console.groupEnd();//結束一組信息的輸出
var isTrue = false;
console.assert(isTrue,"為True時輸出");
console.count();//統計代碼被執行的次數，放在函數里面
console.dir(myObject);//輸出對象信息
console.time();//計時開始
console.timeEnd();//計時結束

支持jQuery選擇器；
copy(document.body);將控制台獲取到的內容復制到粘貼板
keys(myObj);輸出key
values(myObj);輸出value

快捷鍵：
ctrl+回車；//不執行換到下一行
上下箭頭，翻看執行過的代碼

　　Console的具體方法：

 

4、總結

　　想掌握concole的用法，打開瀏覽器多操作幾遍就掌握住了。