必须结合css偏移值重新排序文本节点，而非依赖dom顺序；先定位逻辑字段容器，提取子节点的left/transform值并转为数值坐标，按x升序（或多行分组后排序）重组字符，动态场景需用selenium执行js实时获取偏移。
直接用 BeautifulSoup 或 lxml 解析 HTML 拿到的文本是乱序或覆盖后的结果，必须结合 CSS 偏移值重新排序——这不是字符替换问题，而是视觉层与 DOM 层的错位。
怎么定位被偏移的真实文本节点
关键不是找“哪个标签里有文字”，而是找“哪组标签共同构成一个逻辑字段”。比如价格、电话、评分这类数值型数据，常被拆成多个 <b></b> 或 <span></span>，每个子节点只含 1 个字符，靠 left、top 或 transform 定位。
- 先用浏览器开发者工具选中目标区域（如价格容器），右键 → “Edit as HTML”，观察内部嵌套结构：是否有多层
<b></b>+<i></i>？是否有重复 class 名（如char-0、char-1）？ - 检查这些子节点的 computed styles，重点关注
left（单位通常是 px）、transform: translateX(...)、z-index和visibility。注意：有些站点用opacity: 0隐藏干扰层，但元素仍存在 DOM 中 - 排除伪元素干扰：
::before和::after的content属性可能插入干扰字符，需在 Elements 面板中勾选 “Show user agent shadow DOM” 并展开伪元素查看
如何提取并还原偏移顺序
不能靠肉眼数位置，得把 CSS 偏移值转为可排序的数值坐标，再按视觉流（从左到右/从上到下）重组。
- 用
selenium获取每个子节点的location和size：elem.location_once_scrolled_into_view确保可见，再调用elem.location（返回{'x': xx, 'y': yy}）和elem.size - 对同一逻辑字段下的所有子节点，统一按
x坐标升序排列；若存在多行（如 y 值差 > 字高 1.5 倍），则先分组再每组内排序 - 避免硬编码像素阈值：用
elem.rect获取完整边界框，比单纯location更稳定；若页面缩放或字体渲染差异大，优先用transform中的数值（如translateX(-64px)直接取 -64） - 示例逻辑：
chars = []<br>for elem in driver.find_elements(By.CSS_SELECTOR, '.price-container b'):<br> style = elem.get_attribute('style')<br> left_match = re.search(r'left:\s*(-?\d+)px', style)<br> if left_match:<br> chars.append((int(left_match.group(1)), elem.text.strip()))<br>chars.sort(key=lambda x: x[0])<br>real_text = ''.join(c[1] for c in chars)
动态偏移和随机化怎么应对
很多站点每次刷新都重置 left 值或打乱节点顺序，静态规则会失效。此时必须放弃“解析一次建映射表”的思路，改用运行时实时计算。
- 别依赖节点顺序：DOM 中
<b>1</b><b>2</b><b>3</b>不代表视觉就是 123，得完全以 CSS 偏移为准 - 警惕 JS 动态注入：有些偏移值由 JS 计算后写入
style，用requests拿到的 HTML 里没有真实值，必须用selenium或playwright执行 JS 后再取 - 若偏移量来自内联 JS 变量（如
window.offsetMap = {a: -32, b: 0, ...}），可用driver.execute_script("return window.offsetMap")提前读取，再映射到对应节点 - 性能提示：
selenium获取每个节点样式是慢操作，尽量用单次find_elements+ 批量get_attribute('style')，别循环调用get_attribute多次
最易忽略的一点：偏移还原后还要校验语义合理性。比如还原出的“电话”含字母、“价格”带中文逗号，大概率排序逻辑有偏差——这时候得回头检查是否漏了隐藏层、是否误把 z-index 更高的干扰节点纳入排序。真实场景里，视觉还原只是第一步，逻辑校验才是兜底防线。
Python免费学习笔记（深入）：立即使用
在学习笔记中，你将探索 Python 的核心概念和高级技巧！
