爬虫解析html之消失的她

大家好，我是十一姐，一个分享爬虫相关知识点的程序猿

提示！本文章仅供学习交流，严禁用于非法用途，文章如有不当可联系本人删除！

目录：

        一、为何出现”消失的她”？（代码在文章末尾）

        二、常见爬虫解析html提取内容库推荐

一、为何出现“消失的她”

1、最近我遇到一个网页，我想把它的正文文章部分保存为html文件，测试学习爬取的文章链接是这个https://mp.weixin.qq.com/s/uVSc_HvflqjSD9Smod8OaA，首先我们写个简单的爬虫requests脚本，拿到它全部的html源码，并保存source.html文件

2、然后我们打开存在本地的source.html文件，可以看到左侧是爬虫爬取网页保存下来的html文件，右侧是打开网址展示的网页，两者渲染下来的内容完全一致

3、但这个时候，我只想获取正文部分的内容，也就是不要标题/日期部分的内容，那么就需要写一个爬虫解析html源码的规则，如图解析提取html正文内容的规则，我用了两种语法css语法和xpath语法

●xpath语法是这个：//*[@id="js_content"]●css语法是这个：#js_content

4、爬虫解析html提取目标位置内容的库有很多，诸如re正则库/BeautifulSoup/lxml/parsel/PyQuery/html5lib等，其中parsel库是爬虫框架Scrapy的底层支持

5、而本次解析我先选择了BeautifulSoup来进行提取，并保存为soup.html文件，此时我们打开soup.html文件发现它并不能正常渲染显示，“从直观感受来看正文内容不翼而飞了，即消失的她”

6、一般来说出现上面这种情况，我们会分析是不是因为requests请求的HTML源代码与F12查看的源代码不一致？要知道在Web开发中，使用F12开发者工具和查看网页源代码（通常通过浏览器菜单或右键点击页面元素并选择“查看源代码”）是两种不同的方法，ctrl+u查看的网页源代码是网页的HTML原始代码，没有经过JavaScript处理的，而f12看到的源码可能会在执行部分js改变页面的内容进而渲染展示不一致

7、这个时候我们使用自动化爬虫库DrissionPage获取html源码查看保存测试看看，因为自动化爬虫解析库加载完成页面后的html是和前端f12打开的html内容是一致的

8、如图，展示结果完全一致，那么“消失的她”真的是因为一些js或者css造成的？且看后续分析

9、我不信邪，难道要拿到我想要的html展示只能走自动化了吗？于是我换了其它几个解析库lxml/PyQuery/parsel如图测试，试图找点的更好的方案，或许只是BeautifulSoup库解析的问题？

10、如图通过4个解析库BeautifulSoup/lxml/PyQuery/parsel，用的同一个解析html定位规则#js_content ，只在PyQuery解析库里面拿到了正常的html文件，并正常展示了，仔细比对了下发现通过pyquery解析存到html文件的内容少了最外层的div标签元素<div class="rich_media_content js_underline_content autoTypeSetting24psection" id="js_content" style="visibility: hidden;">  ， 所以其它解析库之所以"出现消失的她"是因为多了这一层div标签？

11、我试着在其它库里面把这层div标签删掉果然出现了正常的html显示

12、那么其它解析库换个解析规则就能正常拿到html内容展示了，即将//*[@id="js_content"]改成它的下一层//*[@id="js_content"]/section或者css的语法#js_content改成#js_content>section

13、我们修改代码如下，再次运行

14、如下，在调整过解析规则后，再次运行存储的html文件后，每个正文的html内容都能正常展示了

15、那么BeautifulSoup/lxml/parsel库为何会出现”消失的她“，而PyQuery却能正常解析，是不是说其它3个解析库就这个网址而言不如PyQuery，究其根本，我找到了一个说法或许可以解释的通，参考这篇文章解释https://mp.weixin.qq.com/s/VaCV3dfJHC8zkh0KeD0h0w以及这篇文章https://blog.csdn.net/qq_58192905/article/details/131690658

16、总结就是：https://mp.weixin.qq.com/s/VaCV3dfJHC8zkh0KeD0h0w

●innerHTML属性用于获取或设置HTML元素内部的内容，返回的是子节点的HTML表示●outerHTML属性用于获取或设置HTML元素及其包含的内容的完整HTML表示，返回的是整个HTML元素及其内容的HTML表示●BeautifulSoup/lxml/parsel库为何会出现”消失的她“，是因为默认解析取的是outerHTML内容，而PyQuery库默认解析取的是innerHTML的内容

17、那么除了上面这个innerHTML的方法和outerHTML的问题外，还记得我们步骤6解释的requests源码和f12源码的不一致的原因吗，一个可能是js导致的，另一个则可能是css等样式标签隐藏不可见导致的，所以我们还是想保留外层的#js_content的div标签，则可以如下操作

18、在python代码里面，我们就删除取得的标签的属性值即可，如下删除再次运行后，每个html文件都正常解析并展示了

19、最后留下一个问题，虽然”消失的她“已经找到原因了，但接下来的有兴趣的也可以研究下，还是这4个解析库BeautifulSoup/lxml/PyQuery/parsel ， 相同的代码，换了个网址https://mp.weixin.qq.com/s/HLZd5mpuyj4t0sRIVBQCPw解析文本，最后为何只有BeautifulSoup库和parsel库解析成功，而PyQuery和lxml库都解析失败出现了多余的超链接，又出现了个”改头换面“ ，难道是解析库也有好坏，欢迎大家在留言区评论指导，也欢迎大家在留言评论区聊聊你在爬虫解析库种最喜欢使用哪个库？

20、最后，本次文章测试代码仅供学习交流

import requests
from DrissionPage import ChromiumPage
from bs4 import BeautifulSoup
from pyquery import PyQuery
from lxml import etree
from parsel import Selector


url = "https://mp.weixin.qq.com/s/uVSc_HvflqjSD9Smod8OaA"
url = "https://mp.weixin.qq.com/s/HLZd5mpuyj4t0sRIVBQCPw"
headers = {"User-Agent": "Mozilla/5.0 (iPhone; CPU iPhone OS 16_6 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.6 Mobile/15E148 Safari/604.1"}
resp = requests.get(url, headers=headers, timeout=10)
text = resp.text.replace("data-src", 'src').replace('href="//', 'href="https://')
# 0、原始文本html
with open(r"D:source.html", "w", encoding='utf-8') as f:
    f.write(text)
# 1、BeautifulSoup解析提取正文html
soup = BeautifulSoup(text, "html.parser")
del soup.find(id='js_content')['style']
content = soup.find(id='js_content').prettify()
# content = soup.select('#js_content>section')[0].prettify()
with open(r"D:soup.html", "w", encoding='utf-8') as f:
    f.write(content)
# 2、PyQuery解析提取正文html
doc = PyQuery(text)
content = doc('#js_content').html()
with open(r"D:pqquery.html", "w", encoding='utf-8') as f:
    f.write(content)
# 3、lxml解析提取正文html
er = etree.HTML(text)
content = er.xpath("//*[@id='js_content']")[0]
content.attrib.pop("style")
# content = er.xpath('//*[@id="js_content"]/section')[0]
content = etree.tostring(content).decode("utf-8")
with open(r"D:xpath.html", "w", encoding='utf-8') as f:
    f.write(content)
# 4、scrapy的底层parsel库提取正文html
er = Selector(text)
content = er.css("#js_content").get().replace('style="visibility: hidden;"', '')
# content = er.css("#js_content>section").get()
with open(r"D:parsel.html", "w", encoding='utf-8') as f:
    f.write(content)

# # DrissionPage解析提取正文html
# page = ChromiumPage()
# page.get(url)
# content = page.ele('#js_content').html.replace("data-src", 'src').replace('href="//', 'href="https://')
# with open(r"D:dp.html", "w", encoding='utf-8') as f:
#     f.write(content)

21、本篇文章视频演示

二、常见爬虫解析html库

1、无论是css语法还是xpath语法，都满足大多数内容提取，选择适合自己的库就可以，也可以用正则提取，那么既包含xpath又包含css又包含正则解析的库可以使用Parsel库，它是爬虫框架Scrapy的底层支持，其它的，推荐一些本篇内容相关的优质的文章

●xpath语法学习：https://www.runoob.com/xpath/xpath-syntax.html●css语法学习：https://www.runoob.com/css/css-id-class.html●innerHTML和outerHtml的区别：https://mp.weixin.qq.com/s/VaCV3dfJHC8zkh0KeD0h0w●BeautifulSoup学习：https://beautifulsoup.readthedocs.io/zh-cn/v4.4.0/#id13●Parsel学习：https://parsel.readthedocs.io/en/latest/●lxml学习：https://lxml.de/parsing.html

● PyQuery学习：https://pyquery.readthedocs.io/en/latest/

The End~ 进群交流扫码加vx

The End~ 更多爬虫交流可加入星球学习

原文始发于微信公众号（逆向OneByOne）：爬虫解析html之消失的她