如何获取regex101编辑器元素？为何BeautifulSoup查询返回空列表？

• 页面内容为动态生成：regex101的编辑器内容（正则表达式、选项、测试字符串）并非初始HTML源码的一部分，而是浏览器加载页面后通过执行JavaScript脚本动态渲染出来的。你用requests.get()只能获取到页面的静态初始源码，此时带cm-line类的div还未被创建，因此BeautifulSoup无法找到这些元素。
• 初始源码不含目标元素：右键页面选择「查看页面源代码」，搜索cm-line会发现完全找不到相关内容——这类元素是JS运行后才添加到DOM树中的，而requests库不会执行任何JS代码，自然拿不到动态生成的元素。

方法1：直接解析页面中的配置数据 #

regex101会把正则、选项和测试字符串存储在页面的脚本变量里，无需等待JS渲染，直接用正则提取这部分JSON数据即可：

import requests
import re
import json

url = 'https://regex101.com/r/t1nqwU/1'
headers = {'User-Agent': 'Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/118.0.0.0 Safari/537.36'}

response = requests.get(url, headers=headers)
# 匹配存储初始状态的脚本内容
match = re.search(r'window\.regex101\.initialState = ({.*?});', response.text, re.DOTALL)
if match:
    data = json.loads(match.group(1))
    wanted = {
        'regexp': data['regex']['value'],
        'options': ''.join([flag for flag, enabled in data['regex']['flags'].items() if enabled]),
        'string': data['testString']
    }
    print(wanted)

执行后输出：

{'regexp': '(\\s)(?:line)', 'options': 'gmi', 'string': 'First line\nSecond LINE\nThird line'}

方法2：用浏览器自动化工具模拟渲染 #

如果遇到更复杂的动态页面，可以用Selenium这类工具模拟浏览器加载页面，等JS渲染完成后再提取元素：

from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC

url = 'https://regex101.com/r/t1nqwU/1'
driver = webdriver.Chrome()
driver.get(url)

# 等待编辑器元素加载完成
wait = WebDriverWait(driver, 10)
regex_elements = wait.until(EC.presence_of_all_elements_located((By.CLASS_NAME, 'cm-line')))

# 提取正则表达式
regexp = regex_elements[0].text
# 提取测试字符串
test_string = '\n'.join([elem.text for elem in regex_elements[2:]])
# 提取启用的正则选项
options = ''.join([elem.text for elem in driver.find_elements(By.CSS_SELECTOR, '.flags .active')])

wanted = {
    'regexp': regexp,
    'options': options,
    'string': test_string
}
print(wanted)
driver.quit()

内容的提问来源于stack exchange，提问作者VERBOSE