反爬篇 | 手把手教你处理 JS 逆向之 CSS 偏移

# 依赖包
# bs4 用于对网页源码的元素样式进行二次更新
pip3 install beautifulsoup4

# lxml 用于爬取网页数据
pip3 install lxml

import requests
from bs4 import BeautifulSoup

...
url = 'http://.../flight.html'
resp = requests.get(url).text

# 首次解析源码
soup = BeautifulSoup(resp, "lxml")

# 查询页面中的em元素
em_elements = soup.find_all("em", class_="rel")

# 对第一个b标签添加flex的属性
for em_element in em_elements:
    first_b_element = em_element.find_all('b')[0]

    # 添加flex属性
    first_b_element['style'] = first_b_element['style'] + ';display:flex;'

# 重新导出进行数据解析
resp = soup.prettify()
...
# 写入到本地文件查看
# with open('temp.html', 'w', encoding='utf-8') as file:
#     file.write(resp)
...

import re
from lxml import etree

...
# 数据解析
html = etree.HTML(resp)

# 查询有几个航班数据
div_list = html.xpath('//div[@class="left col-md-9"]/div')
print('航班数据数目：', len(div_list))

for index in range(len(div_list)):
    # 获取所有b标签
    b_elements = div_list[index].xpath('.//em/b')

    # 从第1个b标签下面的子标签数据 ，这样就可以获取价格的位数（3位、4位）
    price_num_list = b_elements[0].xpath('./i/text()')

    print("打底机票价格为:", ''.join([item.strip() for item in price_num_list]))

    # 从第2个b标签开始，获取真实价格对应的数字
    for index, b_element in enumerate(b_elements[1:]):
        # 数据
        price_num = int(b_element.xpath('./text()')[0])
        # 获取b标签的style属性值
        style = b_element.xpath('./@style')[0]
        # 利用正则表达式，获取left属性值
        left_value = re.findall('left:(.*?)px', style)[0]
        # 根据left值，计算数据在真实价格中的索引位置(-1/-2/-3)
        price_index = int(int(left_value) / 16)

        # 替换源数组中的数据，按索引将数值设置进去
        price_num_list[price_index] = price_num

    # item都转成字符串，合成一个新的数组
    price_num_list = [str(item).strip() for item in price_num_list]

    # 组成价格
    price = int(''.join(price_num_list))

    print("机票价格:", price)
...