整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
tmlParse 是一款基于windwos平臺的HTML文檔解析工具，可快速構建DOM樹，從而輕松實現網頁元素的爬取工作。DOM樹就是一個HTML文檔的節點樹，每個節點由：標簽（Tag）、屬性（Attribute）、文本（Text）三個值來描述。
所謂的HTML文檔解析，指的就是如何構建一顆DOM樹，只有成功構建出DOM樹，才有可能進行后續的數據爬取和分析工作。顯然，構建DOM樹是比較復雜的過程，因為不是每一個HTML文檔都會嚴格按照規范來書寫，因此解析過程需要具有一定容錯能力。此外，解析效率也是一個需要考慮的因素，也就是說最好通過一次文檔掃描即可建立起DOM樹，而不是反復掃描。
下面是HtmlParse介紹。
1、綠色純天然，無任何第三方依賴庫，文件大小不到150K； 2、解析速度快，具有一定的HTML語法容錯能力，可快速將HMTL文檔解析為DOM樹； 3、基于命令行參數，可通過不同參數獲取指定TAG的屬性值和文本內容，從而實現網頁爬取功能； 4、可將爬取數據輸出為json格式，方便第三方程序進一步分析和使用； 5、可爬取script腳本到指定的js文件中；
下載地址：http://softlee.cn/HtmlParse.zip
HtmlParse HtmlPathFile -tag TagName [-attr] [Attribute] [-o] [JsonPathFile]解析指定的HTML文檔，并將文檔中指定的標簽及屬性輸出到指定文件中。
HtmlPathFile：必選參數，要解析的HTML文檔路徑名，如果文件路徑中有空格，可使用雙引號將文件路徑包含；
-tag：必選參數，用于指定要抓取的HTML標簽名稱； -attr：可選參數，用于指定標簽的屬性值，如果不指定，則返回該標簽的所有屬性值； -o：可選參數，用于指定抓取內容輸出的文件，可將抓取的內容保存為json格式的文件。 如果該參數不指定，則進行控制臺輸出。 如果抓取的是script、style則會保存為js格式文件。
如果要抓取doctype，可使用-tag doctype，將整個doctype內容獲取。此時將會忽略-attr指定的任何屬性值。
1、爬取網頁中所有超鏈接
HtmlParse c:/sina.html -tag a -attr href -o c:/sina.json解析C盤下的sina.html文檔，并提取該文檔中的所有超鏈接到sina.json文件中。其中**-tag a -attr href，用于指定獲取超鏈接標簽a的href**屬性。
2、爬取網頁中所有圖片鏈接
HtmlParse c:/sina.html -tag img -attr src -o c:/sina.json解析C盤下的sina.html文檔，并提取該文檔中的所有圖片鏈接到sina.json文件中。
3、爬取網頁中所有腳本
HtmlParse c:/sina.html -tag script -o c:/sina.js解析C盤下的sina.html文檔，并提取該文檔中的所有腳本函數到sina.js文件中。
如果通過-o參數指定輸出文件，則會生成一個json格式的文檔。 TagName為爬取的標簽名稱，比如超鏈接的a，其值是一個json數組，數組中的每個內容為Json對象，每個Json對象，有屬性和文本構成。如果-attr 指定了要爬取的屬性，則AttrName為指定的屬性名稱，比如href或src。text為該標簽的文本內容，有些標簽不存在文本內容，比如img、meta等，則該值為空。json格式如下：
{
"TagName":
{
{"AttrName":"AttrValue1", "text":"text1"}
{"AttrName":"AttrValue1", "text":"text2"}
}
}下面是一個sina網頁的所有超鏈接json
{
"a": [{
"href": "javascript：;",
"text": "設為首頁"
}, {
"href": "javascript：;",
"text": "我的菜單"
}, {
"href": "https://sina.cn/",
"text": "手機新浪網"
}, {
"href": "",
"text": "移動客戶端"
}, {
"href": "https://c.weibo.cn/client/guide/download",
"text": "新浪微博"
}, {
"href": "https://so.sina.cn/palmnews/web-sinanews-app-download.d.html",
"text": "新浪新聞"
}, {
"href": "https://finance.sina.com.cn/mobile/comfinanceweb.shtml",
"text": "新浪財經"
}, {
"href": "https://m.sina.com.cn/m/sinasports.shtml",
"text": "新浪體育"
}, {
"href": "https://tousu.sina.com.cn/about_app/index?frompage=heimaopc",
"text": "黑貓投訴"
}, {
"href": "http://blog.sina.com.cn/lm/z/app/",
"text": "新浪博客"
}, {
"href": "https://games.sina.com.cn/o/kb/12392.shtml",
"text": "新浪游戲"
}, {
"href": "https://zhongce.sina.com.cn/about/app",
"text": "新浪眾測"
}, {
"href": "https://mail.sina.com.cn/client/mobile/index.php?suda-key=mail_app&suda-value=login",
"text": "新浪郵箱客戶端"
}, {
"href": "javascript：;",
"text": "關閉置頂"
}, {來源：https://www.cnblogs.com/softlee/p/16374079.html
在的學習路徑跟以前是不一樣的，以前是沒什么資料，很多東西要看必須得去正面剛。所以我計劃做一個專欄，聊一下Webkit相關的實現。但是放心，難度我會降低到最低，文章也會同步到掘金，賬號應該是同步的，這里還在審批，有興趣可以雙擊支持一下。
·第一章：序列化與反序列化。官方的解釋就不念了，直接用前端的例子來說明一下。如果有一個介紹對象，如何把它存儲到local story里面？只要能夠寫出這種代碼，并且認為這種方式是正常的，沒問題，這就是序列化的操作。同樣的，把它轉換成object的對象，這個操作就叫反序列化。
這里為什么要提這個內容？因為獲取到的協議通過HTTP獲取到的內容就是一個字符串，通過字符串將它轉換成動物的過程就是parseHtml，就是這個解析html，就是parseHtml。這里是把它改成了中文，它的左邊是字母串，右邊是DOM，內存中的結構。
順便提一嘴，解析樣式表是什么？左邊就是一個字母串兒樣式，比如link或者是style都沒問題，右邊就是CSSOM。
·最后給個思考題，前端如何去存儲一個很惡心的對象？就是這種包含了繼承、包含了封裝的存儲關系。如果想不到也沒關系，給個提示，比如有一個element，正常情況下直接in sense of element就可以了，它就是一個元素。
但是為什么還有一個nototype？這個東西有興趣可以考慮一下。當然nototype不一定是解決這個問題的，但是有一點點小關聯。
于parseHTML函數代碼實在過于龐大，我這里就不一次性貼出源代碼了，大家可以前往（https://github.com/vuejs/vue/blob/dev/src/compiler/parser/html-parser.js）查看源代碼。
我們來總結一下該函數的主要功能：
1、匹配標簽的 "<" 字符
匹配的標簽名稱不能是：script、style、textarea
有如下情況：
1、注釋標簽 /^<!\--/
2、條件注釋 /^<!\[/
3、html文檔頭部 /^<!DOCTYPE [^>]+>/i
4、標簽結束 /^<\/ 開頭
5、標簽開始 /^</ 開頭
然后開始匹配標簽的屬性包括w3的標準屬性（id、class）或者自定義的任何屬性，以及vue的指令（v-、:、@）等，直到匹配到 "/>" 標簽的結尾。然后把已匹配的從字符串中刪除，一直 while 循環匹配。
解析開始標簽函數代碼：
function parseStartTag () {
// 標簽的開始 如<div
const start = html.match(startTagOpen)
if (start) {
const match = {
tagName: start[1], // 標簽名稱
attrs: [], // 標簽屬性
start: index // 開始位置
}
// 減去已匹配的長度
advance(start[0].length)
let end, attr
while (!(end = html.match(startTagClose)) && (attr = html.match(dynamicArgAttribute) || html.match(attribute))) {
attr.start = index
v
advance(attr[0].length)
attr.end = index
match.attrs.push(attr) // 把匹配到的屬性添加到attrs數組
}
if (end) { // 標簽的結束符 ">"
match.unarySlash = end[1]
advance(end[0].length) // 減去已匹配的長度
match.end = index // 結束位置
return match
}
}
}處理過后結構如下：
接下來就是處理組合屬性，調用 “handleStartTag” 函數
function handleStartTag (match) {
const tagName = match.tagName // 標簽名稱
const unarySlash = match.unarySlash // 一元標簽
if (expectHTML) {
if (lastTag === 'p' && isNonPhrasingTag(tagName)) {
// 解析標簽結束
parseEndTag(lastTag)
}
if (canBeLeftOpenTag(tagName) && lastTag === tagName) {
parseEndTag(tagName)
}
}
// 是否為一元標簽
const unary = isUnaryTag(tagName) || !!unarySlash
const l = match.attrs.length
// 標簽屬性集合
const attrs = new Array(l)
for (let i = 0; i < l; i++) {
const args = match.attrs[i]
const value = args[3] || args[4] || args[5] || ''
const shouldDecodeNewlines = tagName === 'a' && args[1] === 'href' ? options.shouldDecodeNewlinesForHref : options.shouldDecodeNewlines
attrs[i] = {
name: args[1], // 屬性名稱
value: decodeAttr(value, shouldDecodeNewlines) // 屬性值
}
if (process.env.NODE_ENV !== 'production' && options.outputSourceRange) {
// 開始位置
attrs[i].start = args.start + args[0].match(/^\s*/).length
// 結束位置
attrs[i].end = args.end
}
}
if (!unary) {
stack.push({ tag: tagName, lowerCasedTag: tagName.toLowerCase(), attrs: attrs, start: match.start, end: match.end })
lastTag = tagName
}
// 調用start函數
if (options.start) {
options.start(tagName, attrs, unary, match.start, match.end)
}
}我們簡單說一下最后調用的start函數的作用：
1、判斷是否為svg標簽，并處理svg在ie下的兼容性問題
2、遍歷標簽屬性，驗證其名稱是否有效
3、標簽名是否為 style 或者 script ，如果在服務端會提示warn警告
4、檢查屬性是否存在 v-for、v-if、v-once指令
5、如果是更元素就驗證其合法性，不能是 slot 和 template 標簽，不能存在 v-for指令
以上就是界面html模板的開始標簽的分析，接下來我們來分析如何匹配結束標簽。
請看：Vue源碼全面解析三十 parseHTML函數（解析html（二）結束標簽）
如有錯誤，歡迎指正，謝謝。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
