使用JavaScript原生語法來解析HTML字串

前言

說到爬蟲,相信大家最直接想到的就是使用Python來做
但若以Node.Js為主的開發者,尤其是有自用的小工具網站
為求方便,通常會選用Node.Js當Server,畢竟一個語言可以直接開發前後端,著實方便不少

而Node.Js開發爬蟲也算方便,npm上也有不少爬蟲工具可以直接使用
當把頁面爬下來後,多半會配合jQuery來取得自己要的資料
若不是太複雜的取值,又希望不要安裝太多套件,讓服務精簡一點
其實使用原生的JavaScript語法,也可以快速又有效的取到內容!

寫法

直接上程式碼

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
// 將爬到的網站存在htmlString,傳入buildWebData
// 當然實際上爬到的HTML字串一定更長又全部擠在一行,此僅簡單舉例
const htmlString = `<html>
<head>
<title>我的標題</title>
</head>
<body>
<div class="container">
<div id="myTable">
<div class="col-id"> 第一欄 </div>
<div class="col-id"> 第二欄 </div>
</div>
</div>
</body>
</html>`;

function buildWebData(htmlString) {
const html = document.createElement( 'html' );
html.innerHTML = htmlString;
const title = document.getElementsByTagName('title')[0].innerText // 取得title:我的標題
const colIds = html.getElementsByClassName('col-id');// 會得到 2筆HTML物件

for(let colId of colIds) {
console.log(colId.innerText);
}

}

要注意的是,原生JavaScript語法,取到的值都是陣列,就算確定只會有一筆資料(如title),也要記得寫上[0]再加上.innerText,來得到內容。不然都會是undefine

參考資料

stackoverflow/Parse an HTML string with JS