使用Nokogiri转义<pre>标签内空格与换行，解决下游HTML压缩问题

看起来你已经搞定了换行转<br>的部分，但空格处理卡壳了——我懂这种下游格式强制压缩的头疼！核心问题在于你直接操作了整个节点的HTML字符串，而且替换的目标不对（&...不是正确的空格转义符）。咱们来修正一下：

关键思路 #

下游会把连续空格压缩成单个，所以需要把pre里的每个普通空格转成HTML非断空格 ，同时要避免误替换标签本身的空格（比如<code>标签里的属性空格），所以得精准处理文本节点，而非整个节点的HTML代码。

修正后的代码 #

require 'nokogiri'
doc = Nokogiri::HTML.fragment "<pre><code> 1\n\n 2</code></pre>"

doc.css('pre').each do |pre_node|
  # 遍历pre标签内的所有子节点，只处理文本节点
  pre_node.traverse do |node|
    next unless node.text? # 跳过非文本节点（比如<code>标签本身）
    
    # 替换换行为<br>，替换每个空格为&nbsp;
    modified_content = node.content.gsub("\n", '<br>').gsub(' ', '&nbsp;')
    # 把原文本节点替换成包含<br>的HTML片段
    node.replace(Nokogiri::HTML.fragment(modified_content))
  end
end

# 输出处理后的结果
puts doc.to_html

代码说明 #

1. 遍历文本节点：用traverse遍历pre内的所有节点，只处理text?为true的节点，这样不会碰标签本身的代码，避免破坏结构。
2. 正确的转义符：用 替代普通空格，这是HTML标准的非断空格，下游不会将其压缩。
3. 替换为HTML片段：因为替换后包含<br>标签，所以不能直接赋值给node.content（会把标签转义成文本），而是用replace方法插入HTML片段。

如果你的pre里还有制表符这类空白符，只需再加个处理逻辑（比如把\t替换成4个 ）就行，核心思路是一样的。

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