溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

JS下常見(jiàn)的HTML解析庫(kù)有哪些

發(fā)布時(shí)間：2021-09-18 13:41:49 來(lái)源：億速云 閱讀：423 作者：小新 欄目：web開(kāi)發(fā)

這篇文章主要為大家展示了“JS下常見(jiàn)的HTML解析庫(kù)有哪些”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“JS下常見(jiàn)的HTML解析庫(kù)有哪些”這篇文章吧。

DOMParser

JavaScript和jQuery的DOM操作功能非常適合簡(jiǎn)單HTML片段的解析。在實(shí)際編程中，如果要以編程方式解析DOM完整HTML或XML，則需要一個(gè)更好的解決方案，那就是DOMParser，它是所有現(xiàn)代數(shù)瀏覽器都支持的功能。

JS下常見(jiàn)的HTML解析庫(kù)有哪些

通過(guò)使用DOMParser，可以輕松解析HTML文檔。但是，一般需要通過(guò)欺騙瀏覽器來(lái)實(shí)現(xiàn)解析，比如，通過(guò)向當(dāng)前文檔添加新元素。

DOMParser的用法非常簡(jiǎn)單明了：

let domParser = new DOMParser(); let doc = domParser.parseFromString(stringContainingXMLSource, "application/xml"); domParser = new DOMParser(); doc = domParser.parseFromString(stringContainingSVGSource, "image/svg+xml"); domParser = new DOMParser(); doc = domParser.parseFromString(stringContainingHTMLSource, "text/html");

Cheerio

專(zhuān)為服務(wù)器設(shè)計(jì)的核心jQuery的快速，靈活和精致的實(shí)現(xiàn)。

Cheerio看起來(lái)像jQuery，但是不支持瀏覽器。Cheerio可以解析HTML并使其易于操作，但不會(huì)像瀏覽器中那樣解釋HTML，解析出與瀏覽器不同的內(nèi)容，并且解析的結(jié)果不會(huì)直接發(fā)送給用戶。

Cheerio實(shí)現(xiàn)了jQuery子集，去掉了jQuery中所有與DOM不一致或者是用來(lái)填補(bǔ)瀏覽器的東西，重現(xiàn)了jQuery最美妙的API

由于使用了極其簡(jiǎn)潔而又標(biāo)準(zhǔn)的DOM模型， Cheerio對(duì)文檔的轉(zhuǎn)換，操作，渲染都極其的高效。

JavaScript開(kāi)發(fā)人員都應(yīng)該熟悉Cheerio的語(yǔ)法和用法：

var chro = require('cheerio'), $ = chio.load('<h2 class="title">Hello World!</h2>'); $('h2.title').text('Hello Chongchong!'); $('h2').attr('id', 'welcome'); $.html();結(jié)果：<h2 class="title" id=" welcome ">Hello Chongchong!</h2>

jsdom

JS下常見(jiàn)的HTML解析庫(kù)有哪些

jsdom是很多Web標(biāo)準(zhǔn)(尤其是WHATWG DOM和 HTML 標(biāo)準(zhǔn))純JavaScript實(shí)現(xiàn)，可與Node.js結(jié)合使用。jsdom項(xiàng)目的目標(biāo)是模擬Web瀏覽器的子集，從而滿足測(cè)試和抓取實(shí)際的Web應(yīng)用程序。

jsdom不僅僅是HTML解析器，它還可以當(dāng)成瀏覽器。在解析的上下文中，如果要解析的數(shù)據(jù)中省略了必要的標(biāo)記，它會(huì)自動(dòng)添加必要的標(biāo)記。例如，如果沒(méi)有html標(biāo)簽，它將像瀏覽器一樣隱式地添加它。

還可以選擇指定一些屬性，例如文檔，引薦來(lái)源網(wǎng)址或用戶代理的URL。如果需要解析包含本地URL的鏈接，則該URL特別有用。

由于它實(shí)際上與解析無(wú)關(guān)，因此只提到j(luò)sdom具有(虛擬)控制臺(tái)，對(duì)cookie的支持等?？傊?，需要模擬瀏覽器環(huán)境

它還可以處理外部資源。如有需求jsdom可以用來(lái)加載并執(zhí)行JS腳本。

const jsdom = require("jsdom"); const { JSDOM } = jsdom;const dom = new JSDOM('<!DOCTYPE html><p>Hello, Chongchong!</p>'); console.log(dom.window.document.querySelector("p").textContent);

結(jié)果：

"Hello, Chongchong!"

parse5

JS下常見(jiàn)的HTML解析庫(kù)有哪些

parse5提供了處理HTML時(shí)所需的幾乎所有內(nèi)容。Parse5庫(kù)，目標(biāo)是構(gòu)建其他工具，但也可以實(shí)現(xiàn)HTML解析以完成簡(jiǎn)單任務(wù)。Parse5易于使用，但是并不提供瀏覽器為提供的操作DOM的方法(例如getElementById)。

parse5衍生出了一系列采用它的令人印象深刻的項(xiàng)目：jsdom，Angular2和Polymer。如果需求為對(duì)HTML的高級(jí)操作或解析的可靠基礎(chǔ)，那么顯然這是一個(gè)不錯(cuò)的選擇。

const parse5 = require('parse5');  const document = parse5.parse('<!DOCTYPE html><html><head></head><body>Hello Chongchong!</body></html>');  console.log(document.childNodes[1].tagName);

以上是“JS下常見(jiàn)的HTML解析庫(kù)有哪些”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手