如何修复Rust中lol_html处理HTML时代码替换错位问题

你遇到的错位问题，本质是lol_html流式处理特性下的状态管理错误：因为lol_html是按数据流顺序解析HTML，如果你复用了共享的可变状态（比如全局的内容缓存变量），或者在元素内容未完全加载时就进行替换，就会出现内容串位、第一个元素为空的情况。

核心修复思路 #

1. 在元素完全解析后再处理内容：使用on_end事件而非on_start或on_chunk，确保能获取到<code>元素的完整内容。
2. 每个元素的处理状态独立：避免使用外部共享的可变变量存储元素内容，确保每个<code>元素的内容捕获和替换都是独立的。

修复后的代码示例 #

use lol_html::{rewrite_str, element::ElementRewriter};

fn main() -> Result<(), Box<dyn std::error::Error>> {
    // 示例输入HTML
    let input_html = r#"
    <div class="codewrapper">
        <pre><code>print("First code block")</code></pre>
    </div>
    <div class="codewrapper">
        <pre><code>def second_func():
    return "second"</code></pre>
    </div>
    <a href="old-domain.com/link">Old Link</a>
    "#;

    let processed_html = rewrite_str(input_html, |rewriter| {
        // 处理<code>元素，包裹为Confluence代码宏
        rewriter.element("div.codewrapper pre code", |handler| {
            handler.on_end(|element| {
                // 获取当前<code>的完整内容
                let code_content = element.inner_html();
                // 生成Confluence代码宏的HTML结构
                let confluence_macro = format!(
                    r#"<ac:structured-macro ac:name="code">
                        <ac:parameter ac:name="language">python</ac:parameter>
                        <ac:plain-text-body><![CDATA[{}]]></ac:plain-text-body>
                    </ac:structured-macro>"#,
                    code_content
                );
                // 替换当前<code>元素的内容
                element.set_inner_html(&confluence_macro)?;
                Ok(())
            })
        })
        // 处理链接更新（保留你的原有逻辑）
        .element("a", |handler| {
            handler.on_start(|element| {
                if let Some(href) = element.get_attribute("href") {
                    let new_href = href.replace("old-domain.com", "new-domain.com");
                    element.set_attribute("href", &new_href)?;
                }
                Ok(())
            })
        });
    })?;

    println!("{}", processed_html);
    Ok(())
}

关键细节解释 #

• on_end事件的必要性：lol_html流式解析时，元素内容是分块流入的，on_start触发时元素内容还未加载，on_chunk只能获取部分内容；只有on_end触发时，元素的所有子内容都已解析完成，此时inner_html()能拿到完整的代码文本。
• 独立状态避免串位：每个<code>元素的code_content都是在on_end闭包内局部创建的，不会和其他元素共享数据，彻底避免了“第二个元素用第一个内容”的问题。
• 替换逻辑精准性：直接操作当前<code>元素的内容，不会影响父元素或其他同级元素，保证HTML结构的正确性。

常见错误排查 #

如果你之前的代码用了类似以下的写法，就会导致错位：

// 错误示例：使用外部共享变量存储内容
let mut code_content = String::new();
rewriter.element("div.codewrapper pre code", |handler| {
    handler.on_chunk(|chunk| {
        code_content.push_str(chunk.as_str());
        Ok(())
    })
    .on_end(|element| {
        // 替换时用了code_content，但处理下一个元素时没清空
        element.set_inner_html(&code_content)?;
        Ok(())
    })
});

这种写法中，code_content是外部共享变量，处理完第一个元素后未清空，第二个元素会累加第一个的内容，同时第一个元素的替换可能因为内容未及时更新导致为空。

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