如何用LXML获取并修改<section>元素间的零散文本内容？

嘿，这个问题我之前处理HTML模板的时候也踩过坑！你之所以用section.text或者section.tail拿不到那些零散的文本片段，是因为这些文本其实是section的直接子文本节点——它们既不是某个子元素的内容，也不是元素的尾随文本，所以得换个方式遍历和处理。

核心思路：遍历所有子节点，精准定位文本节点 #

不管你用前端JS还是后端HTML解析库（比如BeautifulSoup），核心都是直接遍历section的所有子节点，区分出「文本节点」和「元素节点」，只对文本节点做替换操作。

方案1：前端JavaScript实现 #

如果是在浏览器环境里处理DOM，直接遍历section.childNodes，判断节点类型为文本节点（Node.TEXT_NODE，对应数值3），然后根据需求替换：

情况A：把$$code$$替换为文本形式的标签（会显示为<code>xxx</code>） #

如果只是想把标记替换成纯文本标签，直接修改文本节点的nodeValue即可：

const section = document.querySelector('section');

// 遍历所有直接子节点
for (const node of section.childNodes) {
  // 只处理文本节点，过滤纯空白文本
  if (node.nodeType === Node.TEXT_NODE && node.nodeValue.trim()) {
    // 正则替换所有$$xxx$$为<code>xxx</code>
    node.nodeValue = node.nodeValue.replace(/\$\$(.*?)\$\$/g, '<code>$1</code>');
  }
}

情况B：把$$code$$替换为实际的DOM元素（会渲染成代码块） #

如果要让替换后的内容成为真实的<code>元素（而不是纯文本），就不能直接修改nodeValue，需要拆分原文本节点，插入新的元素节点：

const section = document.querySelector('section');

// 转成数组遍历，避免修改DOM时影响原节点集合
const childNodes = Array.from(section.childNodes);

childNodes.forEach(node => {
  if (node.nodeType !== Node.TEXT_NODE || !node.nodeValue.trim()) return;

  const text = node.nodeValue;
  // 按$$拆分文本，得到[普通文本, 代码内容, 普通文本, ...]的结构
  const parts = text.split(/\$\$(.*?)\$\$/);
  
  // 先删除原文本节点
  node.remove();

  // 遍历拆分后的片段，依次插入到原节点位置
  parts.forEach((part, index) => {
    if (!part.trim()) return;
    
    if (index % 2 === 0) {
      // 偶数位是普通文本，创建文本节点插入
      section.insertBefore(document.createTextNode(part), node.nextSibling || null);
    } else {
      // 奇数位是代码内容，创建<code>元素插入
      const codeEl = document.createElement('code');
      codeEl.textContent = part;
      section.insertBefore(codeEl, node.nextSibling || null);
    }
  });
});

方案2：后端Python（BeautifulSoup）实现 #

如果是在后端处理HTML模板，用BeautifulSoup的话，需要遍历section.contents，区分NavigableString（文本节点）和Tag（元素节点）：

from bs4 import BeautifulSoup, NavigableString

# 示例HTML模板
html_content = '''
<section>
  这是一段带$$示例代码1$$的文本
  <p>中间的段落</p>
  $$示例代码2$$<figure><img src="demo.jpg"></figure>
</section>
'''

soup = BeautifulSoup(html_content, 'html.parser')
section = soup.find('section')

# 转成列表遍历，避免修改DOM时影响原集合
for node in list(section.contents):
    if isinstance(node, NavigableString):
        text = str(node).strip()
        if not text:
            # 过滤纯空白文本
            node.extract()
            continue
        
        # 按$$拆分文本
        parts = text.split('$$')
        # 删除原文本节点
        node.extract()
        
        # 插入拆分后的内容
        for idx, part in enumerate(parts):
            if not part.strip():
                continue
            if idx % 2 == 0:
                # 普通文本
                section.append(NavigableString(part))
            else:
                # 创建<code>标签并插入
                code_tag = soup.new_tag('code')
                code_tag.string = part
                section.append(code_tag)

关键注意点 #

1. 不要依赖element.text：它只会返回所有子节点的合并文本，无法单独处理每个零散的文本片段。
2. 过滤空白文本节点：HTML里的换行、空格会被解析成空白文本节点，处理前最好过滤掉，避免无效操作。
3. 遍历前转成静态集合：修改DOM时，原节点集合会动态变化，所以要先转成数组或列表再遍历。

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