說說這個網站
汽車之家，反爬神通常的存在，字體反爬的鼻祖網站，這個網站的開發團隊，必定擅長前端吧，2019年4月19日開始寫這篇博客，不保證這個代碼能夠存活到月底，但願後來爬蟲coder，繼續和汽車之間對抗。javascript
CSDN上關於汽車之家的反爬文章千千萬萬了，可是爬蟲就是這點有意思，這一刻寫完，下一刻還能不能用就不知道了，因此能夠一直不斷有人寫下去。但願今天的博客能幫你學會一個反爬技巧。css
今天要爬去的網頁
https://car.autohome.com.cn/config/series/59.html#pvareaid=3454437 咱們要作的就是爬取汽車參數配置html
具體的數據以下 
查看頁面源代碼發現，一個好玩的事情，源代碼中使用了大量的CSS3的語法 下圖，我標註的部分就是關鍵的一些數據了，大概在600行以後。 前端
反爬措施展現
源文件數據java
剎車/<span class='hs_kw86_baikeIl'></span>安全系統
頁面顯示數據 一些關鍵數據被處理過了。python
爬取關鍵信息
咱們要把源代碼中的關鍵信息先獲取到，即便他數據是存在反爬的。獲取數據是很是簡單的。經過request模塊便可程序員
def get_html():
url = "https://car.autohome.com.cn/config/series/59.html#pvareaid=3454437"
headers = {
"User-agent": "你的瀏覽器UA"
}
with requests.get(url=url, headers=headers, timeout=3) as res:
html = res.content.decode("utf-8")
return html
找關鍵因素
在html頁面中找到關鍵點：web
- var config
- var levelId
- var keyLink
- var bag
- var color
- var innerColor
- var option
這些內容你找到以後，你下手就用重點了，他們是什麼？數據啊，經過簡單的正則表達式就能夠獲取到了正則表達式
def get_detail(html):
config = re.search("var config = (.*?)};", html, re.S)
option = re.search("var option = (.*?)};", html, re.S)
print(config,option)
輸出結果瀏覽器
>python e:/python/demo.py
<re.Match object; span=(167291, 233943), match='var config = {"message":"<span class=\'hs_kw50_co>
>python e:/python/demo.py
<re.Match object; span=(167291, 233943), match='var config = {"message":"<span class=\'hs_kw50_co> <re.Match object; span=(233952, 442342), match='var option = {"message":"<span class=\'hs_kw16_op>
處理汽車參數
經過正則表達式的search方法，匹配數據，而後調用group(0) 便可獲得相關的數據
def get_detail(html):
config = re.search("var config = (.*?)};", html, re.S)
option = re.search("var option = (.*?)};", html, re.S)
# 處理汽車參數
car_info = ""
if config and option :
car_info = car_info + config.group(0) + option.group(0)
print(car_info)
拿到數據以後，沒有完，這是混淆以後的數據，須要解析回去，繼續關注網頁源代碼，發現一段奇怪的JS。這段JS先不用管，留點印象便可~
關鍵字破解
注意到
<span class="hs_kw28_configfH"></span>
hs_kw數字_configfH是一個span的class
我選中span以後的::before 對應的css爲 發現實測兩個字出現了，對應的class請記住
.hs_kw28_configfH::before
全局搜索一下
雙擊找到來源
肯定數據就在html源碼當中。
格式化html源碼，在內部搜索hs_kw，找到關鍵函數
function $GetClassName$($index$) {
return '.hs_kw' + $index$ + '_baikeCt';
}
這段JS的來源就是咱們剛纔保留的那個JS代碼段，複製全部的JS源碼，到source裏面新建一個snippet，而後咱們運行一下。 在裏面代碼最後添加一個斷點，ctrl+enter運行 運行到斷點，在右側就能看到一些參數出現
- $ruleDict$:
- $rulePosList$ 經過參數去查找，核心的替換方法
接下來，咱們進行替換操做，這部流程須要用到selenium進行替換
核心代碼以下，主要的註釋，我寫在了代碼內部，但願能幫助你看懂
def write_html(js_list,car_info):
# 運行JS的DOM -- 這部破解是最麻煩的，很是耗時間~參考了互聯網上的大神代碼
DOM = ("var rules = '2';"
"var document = {};"
"function getRules(){return rules}"
"document.createElement = function() {"
" return {"
" sheet: {"
" insertRule: function(rule, i) {"
" if (rules.length == 0) {"
" rules = rule;"
" } else {"
" rules = rules + '#' + rule;"
" }"
" }"
" }"
" }"
"};"
"document.querySelectorAll = function() {"
" return {};"
"};"
"document.head = {};"
"document.head.appendChild = function() {};"
"var window = {};"
"window.decodeURIComponent = decodeURIComponent;")
# 把JS文件寫入到文件中去
for item in js_list:
DOM = DOM + item
html_type = "<html><meta http-equiv='Content-Type' content='text/html; charset=utf-8' /><head></head><body> <script type='text/javascript'>"
# 拼接成一個能夠運行的網頁
js = html_type + DOM + " document.write(rules)</script></body></html>"
# 再次運行的時候，請把文件刪除，不然沒法建立同名文件，或者自行加驗證便可
with open("./demo.html", "w", encoding="utf-8") as f:
f.write(js)
# 經過selenium將數據讀取出來，進行替換
driver = webdriver.PhantomJS()
driver.get("./demo.html")
# 讀取body部分
text = driver.find_element_by_tag_name('body').text
# 匹配車輛參數中全部的span標籤
span_list = re.findall("<span(.*?)></span>", car_info) # car_info 是我上面拼接的字符串
# 按照span標籤與text中的關鍵字進行替換
for span in span_list:
# 這個地方匹配的是class的名稱 例如 <span class='hs_kw7_optionZl'></span> 匹配 hs_kw7_optionZl 出來
info = re.search("'(.*?)'", span)
if info:
class_info = str(info.group(1)) + "::before { content:(.*?)}" # 拼接爲 hs_kw7_optionZl::before { content:(.*?)}
content = re.search(class_info, text).group(1) # 匹配文字內容，返回結果爲 "實測""油耗""質保"
car_info = car_info.replace(str("<span class='" + info.group(1) + "'></span>"),
re.search("\"(.*?)\"", content).group(1))
print(car_info)
運行結果
對比一下原來數據，發現問題不大，完成任務。
入庫操做
剩下的步驟就是數據持久化了，數據拿到以後，其餘的都是比較簡單的，但願你能夠直接搞定。
小擴展：格式化JS
碰到這種JS，直接找到格式化工具處理它
http://tool.oschina.net/codeformat/js/
格式完成以後，代碼具有必定的閱讀能力
思路彙總
汽車之家用CSS隱藏了部分真實的字體，在解決的過程當中，須要首先針對class去查找，當找到JS位置的時候，必需要搞定它的加密規則，順着規則以後，只須要完成基本的key、value替換就能夠拿到真實的數據了。
關注公衆帳號：非本科程序員
關注以後，發送【汽車】獲取源碼