目錄
创建 Document 对象
查找到指定节点
属性操作
迭代
删除节点、插入 HTML、导出 HTML
总结
首頁 web前端 html教學 zhihu-go 源码解析:用 goquery 解析 HTML_html/css_WEB-ITnose

zhihu-go 源码解析:用 goquery 解析 HTML_html/css_WEB-ITnose

Jun 21, 2016 am 08:52 AM

上一篇博客 简单介绍了 zhihu-go项目的缘起,本篇简单介绍一下关于处理 HTML 的细节。

因为知乎没有开发 API,所以只能通过模拟浏览器操作的方式获取数据,这些数据有两种格式:普通的 HTML 文档和某些 Ajax 接口返回的 JSON(返回的数据实际上也是 HTML)。其实也就是爬虫了,抓取网页,然后提取数据。一般来说从 HTML 文档提取数据有这些做法:正则、XPath、CSS 选择器等。对我来说,正则写起来比较复杂,代码可读性差而且维护起来麻烦;XPath 没有详细了解,不过用起来应该不难,而且 Chrome 浏览器可以直接提取 XPath. zhihu-go 里用的是选择器的方式,使用了 goquery.

goquery 是 “a little like that j-thing, only in Go”,也就是用 jQuery 的方式去操作 DOM. jQuery 大家都很熟,API 也很简单明了。本文不详细介绍 goquery,下面选几个场景(API)讲讲在 zhihu-go 里的应用。

创建 Document 对象

goquery 暴露了两个结构体: Document和 Selection. Document表示一个 HTML 文档, Selection用于像 jQuery 一样操作,支持链式调用。goquery 需要指定一个 HTML 文档才能继续后续的操作,有以下几个构造方式:

  • NewDocumentFromNode(root *html.Node) *Document: 传入 *html.Node对象,也就是根节点。
  • NewDocument(url string) (*Document, error): 传入 URL,内部用 http.Get获取网页。
  • NewDocumentFromReader(r io.Reader) (*Document, error): 传入 io.Reader,内部从 reader 中读取内容并解析。
  • NewDocumentFromResponse(res *http.Response) (*Document, error): 传入 HTTP 响应,内部拿到 res.Body(实现了 io.Reader) 后的处理方式类似 NewDocumentFromReader.

因为知乎的页面需要登录才能访问(还需要伪造请求头),而且我们并不想手动解析 HTML 来获取 *html.Node,最后用到了另外两个构造方法。大致的使用场景是:

  • 请求 HTML 页面(如问题页面),调用 NewDocumentFromResponse
  • 请求 Ajax 接口,返回的 JSON 数据里是一些 HTML 片段,用 NewDocumentFromReader,其中 r = strings.NewReader(html)

为了方便举例说明,下文采用这个定义: var doc *goquery.Document.

查找到指定节点

Selection有一系列类似 jQuery 的方法, Document结构体内嵌了 *Selection,因此也能直接调用这些方法。主要的方法是 Selection.Find(selector string),传入一个选择器,返回一个新的,匹配到的 *Selection,所以能够链式调用。

比如在用户主页(如 黄继新),要获取用户的 BIO. 首先用 Chrome 定位到对应的 HTML:

<span class="bio" title="和知乎在一起">和知乎在一起</span>
登入後複製

对应的 go 代码就是:

doc.Find("span.bio")
登入後複製

如果一个选择器对应多个结果,可以使用 First(), Last(), Eq(index int), Slice(start, end int)这些方法进一步定位。

还是在用户主页,在用户资料栏的底下,从左往右展示了提问数、回答数、文章数、收藏数和公共编辑的次数。查看 HTML 源码后发现这几项的 class 是一样的,所以只能通过下标索引来区分。

先看 HTML 源码:

<div class="profile-navbar clearfix"><a class="item " href="/people/jixin/asks">提问<span class="num">1336</span></a><a class="item " href="/people/jixin/answers">回答<span class="num">785</span></a><a class="item " href="/people/jixin/posts">文章<span class="num">91</span></a><a class="item " href="/people/jixin/collections">收藏<span class="num">44</span></a><a class="item " href="/people/jixin/logs">公共编辑<span class="num">51648</span></a></div>
登入後複製

如果要定位找到回答数,对应的 go 代码是:

doc.Find("div.profile-navbar").Find("span.num").Eq(1)
登入後複製

属性操作

经常需要获取一个标签的内容和某些属性值,使用 goquery 可以很容易做到。

继续上面获取回答数的例子,用 Text() string方法可以获取标签内的文本内容,其中包含所有子标签。

text := doc.Find("div.profile-navbar").Find("span.num").Eq(1).Text()    // "785"
登入後複製

需要注意的是, Text()方法返回的字符串,可能前后有很多空白字符,可以视情况做清除。

获取属性值也很容易,有两个方法:

  • Attr(attrName string) (val string, exists bool): 返回属性值和该属性是否存在,类似从 map中取值
  • AttrOr(attrName, defaultValue string) string: 和上一个方法类似,区别在于如果属性不存在,则返回给定的默认值

常见的使用场景就是获取一个 a 标签的链接。继续上面获取回答的例子,如果想要得到用户回答的主页,可以这么做:

href, _ := doc.Find("div.profile-navbar").Find("a.item").Eq(1).Attr("href")
登入後複製

还有其他设置属性、操作 class 的方法,就不展开讨论了。

迭代

很多场景需要返回列表数据,比如问题的关注者列表、所有回答,某个答案的点赞的用户列表等。这种情况下一般需要用到迭代,遍历所有的同类节点,做某些操作。

goquery 提供了三个用于迭代的方法,都接受一个匿名函数作为参数:

  • Each(f func(int, *Selection)) *Selection: 其中函数 f的第一个参数是当前的下标,第二个参数是当前的节点
  • EachWithBreak(f func(int, *Selection) bool) *Selection: 和 Each类似,增加了中途跳出循环的能力,当 f返回 false时结束迭代
  • Map(f func(int, *Selection) string) (result []string): f的参数与上面一样,返回一个 string 类型,最终返回 []string.

比如获取一个收藏夹(如 黄继新的收藏:关于知乎的思考)下所有的问题,可以这么做(见 zhihu-go/collections.go):

func getQuestionsFromDoc(doc *goquery.Document) []*Question {	questions := make([]*Question, 0, pageSize)	items := doc.Find("div#zh-list-answer-wrap").Find("h2.zm-item-title")	items.Each(func(index int, sel *goquery.Selection) {		a := sel.Find("a")		qTitle := strip(a.Text())		qHref, _ := a.Attr("href")		thisQuestion := NewQuestion(makeZhihuLink(qHref), qTitle)		questions = append(questions, thisQuestion)	})	return questions}
登入後複製

EachWithBreak在 zhihu-go 中也有用到,可以参见 Answer.GetVotersN 方法: zhihu-go/answer.go.

删除节点、插入 HTML、导出 HTML

有一个需求是把回答内容输出到 HTML,说白了其实就是修复和清洗 HTML,具体的细节可以看 answer.go 里的 answerSelectionToHtml 函数. 其中用到了一些需要修改文档的操作。

比如,调用 Remove()方法把一个节点删掉:

sel.Find("noscript").Each(func(_ int, tag *goquery.Selection) {    tag.Remove() // 把无用的 noscript 去掉})
登入後複製

在节点后插入一段 HTML:

sel.Find("img").Each(func(_ int, tag *goquery.Selection) {    var src string    if tag.HasClass("origin_image") {        src, _ = tag.Attr("data-original")    } else {        src, _ = tag.Attr("data-actualsrc")    }    tag.SetAttr("src", src)    if tag.Next().Size() == 0 {        tag.AfterHtml("<br>")   // 在 img 标签后插入一个换行    }})
登入後複製

在标签尾部 append 一段内容:

wrapper := `<html><head><meta charset="utf-8"></head><body></body></html>`doc, _ := goquery.NewDocumentFromReader(strings.NewReader(wrapper))doc.Find("body").AppendSelection(sel)
登入後複製

最终输出为 html 文档:

html, err := doc.Html()
登入後複製

总结

上面的例子基本涵盖了 zhihu-go 中关于 HTML 操作的场景,得益于 goquery 和 jQuery 的 API 风格,实现起来还是非常简单的。

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

HTML容易為初學者學習嗎? HTML容易為初學者學習嗎? Apr 07, 2025 am 12:11 AM

HTML適合初學者學習,因為它簡單易學且能快速看到成果。 1)HTML的學習曲線平緩,易於上手。 2)只需掌握基本標籤即可開始創建網頁。 3)靈活性高,可與CSS和JavaScript結合使用。 4)豐富的學習資源和現代工具支持學習過程。

HTML,CSS和JavaScript的角色:核心職責 HTML,CSS和JavaScript的角色:核心職責 Apr 08, 2025 pm 07:05 PM

HTML定義網頁結構,CSS負責樣式和佈局,JavaScript賦予動態交互。三者在網頁開發中各司其職,共同構建豐富多彩的網站。

了解HTML,CSS和JavaScript:初學者指南 了解HTML,CSS和JavaScript:初學者指南 Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml,CSS和JavaScript:1)HTMLStructuresContent,2)CSSStyleSIT和3)JavaScriptAddSstractivity,形成thebasisofmodernWebemodernWebExexperiences。

Gitee Pages靜態網站部署失敗:單個文件404錯誤如何排查和解決? Gitee Pages靜態網站部署失敗:單個文件404錯誤如何排查和解決? Apr 04, 2025 pm 11:54 PM

GiteePages靜態網站部署失敗:404錯誤排查與解決在使用Gitee...

HTML中起始標籤的示例是什麼? HTML中起始標籤的示例是什麼? Apr 06, 2025 am 12:04 AM

AnexampleOfAstartingTaginHtmlis,beginSaparagraph.startingTagSareEssentialInhtmlastheyInitiateEllements,defiteTheeTheErtypes,andarecrucialforsstructuringwebpages wepages webpages andConstructingthedom。

如何用CSS3和JavaScript實現圖片點擊後周圍圖片散開並放大效果? 如何用CSS3和JavaScript實現圖片點擊後周圍圖片散開並放大效果? Apr 05, 2025 am 06:15 AM

實現圖片點擊後周圍圖片散開並放大效果許多網頁設計中,需要實現一種交互效果:點擊某張圖片,使其周圍的...

HTML,CSS和JavaScript:Web開發人員的基本工具 HTML,CSS和JavaScript:Web開發人員的基本工具 Apr 09, 2025 am 12:12 AM

HTML、CSS和JavaScript是Web開發的三大支柱。 1.HTML定義網頁結構,使用標籤如、等。 2.CSS控製網頁樣式,使用選擇器和屬性如color、font-size等。 3.JavaScript實現動態效果和交互,通過事件監聽和DOM操作。

網頁批註如何實現Y軸位置的自適應佈局? 網頁批註如何實現Y軸位置的自適應佈局? Apr 04, 2025 pm 11:30 PM

網頁批註功能的Y軸位置自適應算法本文將探討如何實現類似Word文檔的批註功能,特別是如何處理批註之間的間�...

See all articles