如何使用 Nokogiri 插入具有适当缩进的 HTML 块？

Posted 2023-03-16

【中文标题】如何使用 Nokogiri 插入具有适当缩进的 HTML 块？

【英文标题】：How to use Nokogiri to insert a block of HTML with proper indentation?

【发布时间】：2021-12-07 19:46:12

【问题描述】：

我有一块 html 想要插入到 Nokogiri 中的 HTML 文档中。问题是在 HTML 中的任何位置插入块时，它不会缩进插入的位置。这是一个例子：

HTML 文档（例如缩写）：

<div>
  <div id="insertHere">
  </div>
</div>

要插入的 HTML：

<table>
  <tbody>
    <tr>
      <td>Hi</td>
    </tr>
  </tbody>
</table>

插入后的结果。发生这种情况是因为它没有考虑缩进。我希望能够考虑插入它的缩进，并用该缩进填充正在插入的每一行的左侧：

<div>
  <table>
  <tbody>
    <tr>
      <td>Hi</td>
    </tr>
  </tbody>
</table>
</div>

它是使用 Nokogiri 的 node.replace('<table>....</table>') 插入的。

我希望它看起来像什么：

<div>
  <table>
    <tbody>
      <tr>
        <td>Hi</td>
      </tr>
    </tbody>
  </table>
</div>

有没有办法让我插入或替换的块的缩进左侧？

编辑：如果不使用 Nokogiri，这是我可以完成此任务的另一种方式吗？也许在每个元素上设置一个唯一的 ID，就像在 react 元素上设置的 data-react-id 一样，然后一旦我有一个需要插入元素的地方，我就可以使用正则表达式找到它并匹配左侧的空格缩进？对 Nokogiri 以外的其他方法开放。尝试集思广益其他选择。

我知道 Nokogiri 不能“漂亮打印”，但有没有办法让空格“向左或”或“当前元素之前和换行之后”的空格来计算缩进，然后我可以填充什么被手动插入。也许在 nokogiri 中有一种方法可以获取节点的父节点，然后一些如何使用父节点的内容来获取当前节点左侧的空白。

【问题讨论】：

我不认为 N​​okogiri 用于 HTML 代码的漂亮打印和缩进。你可以看看这里，看看这是否有帮助：***.com/questions/1898829/…

@Casper 感谢您的链接。刚刚在底部添加了一个编辑。在 nokogiri 之外寻找其他选择来实现这一点。但如果我能弄清楚如何计算缩进，我就可以“手动”漂亮地打印出我的需要。

或者对漂亮的打印/格式化和html文档的方法有什么建议？

【参考方案1】：

事实证明 Nokogiri 并不像@Casper 提到的那样用于漂亮的打印。相反，我只是通过我使用 https://github.com/threedaymonk/htmlbeautifier gem 的 html 漂亮打印机运行它。