应遍历所有文本节点（soup.find_all(string=True)），对每个非空白文本调用find_parent(class_='highlight')判断是否高亮，从而保留原始顺序并准确标识高亮/普通文本。
用 BeautifulSoup 找所有文本节点并判断父级是否含高亮类
直接调用 soup.find_all('span', class_='highlight') 只能拿到被标记的片段，会漏掉普通文本和它们之间的顺序。正确做法是遍历全部文本节点，再逐个向上查父元素是否带目标 class。
关键点在于：文本节点本身没有 class 属性，必须用 text_node.find_parent(class_='highlight') 向上追溯。如果返回非 None，说明它在高亮容器内。
-
soup.find_all(string=True)返回所有文本节点（包括空格、换行），但会跳过注释和样式块 - 过滤掉纯空白节点：用
if text.strip()排除只有空格或换行的string - 注意
find_parent()和find_parents()的区别：前者只找最近一个匹配祖先，后者返回列表；多数场景用前者更准 - 若高亮标记是
data-highlight="true"这类自定义属性，把参数改成data_highlight="true"即可（BeautifulSoup 会自动转换连字符为下划线）
保留原始顺序时别用 get_text() —— 它会合并相邻文本
Hello Worldsoup.get_text() 看似方便，但它会把 "HelloWorld"（中间无换行），彻底丢失结构信息。要维持段落、标题、列表项之间的相对位置，必须手动遍历 DOM 节点。
实操建议是按 soup.body.descendants 或 soup.find_all(recursive=False) 逐层处理，对每个节点判断类型：isinstance(node, NavigableString) 是文本，node.name == 'h2' 是标题，再分别打标。
- 如果 HTML 中有
get_text(separator='\n')，它对嵌套结构不敏感；应显式检测标签并插入\n - 遇到
<script></script>或节点，记得跳过，否则会把 JS 代码当文本提取 - 用
node.get('class', [])比直接访问node['class']更安全，避免 KeyError
正则无法可靠识别“带标记的文本”边界
写类似 r'(.*?)' 的正则，看似能提取内容，但只要 HTML 里出现换行、属性顺序变化、或嵌套标签（比如 abcdefghi），就会匹配失败或截断。
浏览器渲染后的真实文本顺序，正则根本不知道。它只认字符串位置，而 DOM 树才是语义结构的载体。
- 正则适合从 HTML 片段中抽单个字段（如
"price":\s*(\d+)），不适合做文本流结构化 - 若必须用正则（例如服务端无解析库），至少加上
re.DOTALL并用非贪婪匹配，但依然要接受漏匹配风险 - 遇到
等实体，正则不会自动解码；而 BeautifulSoup 的text属性默认已处理
JavaScript 环境下用 textContent + closest() 最省事
在浏览器或 Node.js（配 jsdom）里，不用引入大库也能做到：创建临时元素，设 innerHTML，再遍历其 childNodes，对每个文本节点调用 node.parentElement?.closest('.highlight') 判断归属。
比 Python 方案更快，且天然支持 CSS 选择器语义（比如 .highlight:not(.disabled)）。
- 注意
textContent和innerText的区别：textContent返回所有文本（含隐藏元素），innerText受 CSSdisplay: none影响，选哪个取决于是否要过滤不可见内容 - 用
Array.from(el.childNodes)转数组，才能用filter()和map()处理，原生childNodes是类数组 - 如果原始 HTML 来自用户输入，务必先用
DOMPurify.sanitize()过滤 XSS，再解析，否则执行恶意 script 风险极高
提取带标记文本真正的难点不在“怎么拿”，而在“怎么定义标记范围”——class 名可能动态生成、CSS 选择器可能依赖上下文、文本节点可能跨多个嵌套层级。这些细节一旦忽略，输出就只是看着像，实际顺序或归属全错。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
