如何在一个跨度中包装 Nokogiri 节点集答案

【问题标题】：How to wrap Nokogiri nodeset in ONE span如何在一个跨度中包装 Nokogiri 节点集
【发布时间】：2014-02-25 00:24:19
【问题描述】：

所以我的目标是将所有段落包装在一个跨度内的初始段落之后。我试图弄清楚如何将节点集包装在单个跨度中，并且 .wrap() 将每个节点包装在自己的跨度中。随心所欲：

<p>First</p>
<p>Second</p>
<p>Third</p>

变成：

<p>First</p>
<span>
<p>Second</p>
<p>Third</p>
</span>

任何示例代码可以提供帮助？谢谢！

【问题讨论】：

如果这是 HTML，请注意 span 中的 p 无效。

标签： ruby nokogiri

【解决方案1】：

我会这样做：

require 'nokogiri'

doc =  Nokogiri::HTML::DocumentFragment.parse(<<-html)
<p>First</p>
<p>Second</p>
<p>Third</p>
html

nodeset = doc.css("p")
new_node = Nokogiri::XML::Node.new('span',doc)
new_node << nodeset[1..-1]
nodeset.first.after(new_node)
puts doc.to_html
# >> <p>First</p><span><p>Second</p>
# >> <p>Third</p></span>
# >>

【讨论】：

Ps：使用 Fragment 而不是 Document。
@Phrogz 是的……那是一个错字。但是如何做漂亮的打印呢？

【解决方案2】：

我会这样做：

require 'nokogiri'

html = '<p>First</p>
<p>Second</p>
<p>Third</p>
'

doc = Nokogiri::HTML(html)

paragraphs = doc.search('p')[1..-1].unlink 
doc.at('p').after('<span>')
doc.at('span').add_child(paragraphs)
puts doc.to_html

这导致 HTML 看起来像：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html><body>
<p>First</p>
<span><p>Second</p>
<p>Third</p></span>

</body></html>

为了让您了解发生了什么，这里有一个更详细的输出，显示了对 doc 的中间更改：

paragraphs = doc.search('p')[1..-1].unlink 
paragraphs.to_html 
# => "<p>Second</p><p>Third</p>"
doc.at('p').after('<span>')
doc.to_html 
# => "<!DOCTYPE html PUBLIC \"-//W3C//DTD HTML 4.0 Transitional//EN\" \"http://www.w3.org/TR/REC-html40/loose.dtd\">\n<html><body>\n<p>First</p>\n<span></span>\n\n</body></html>\n"
doc.at('span').add_child(paragraphs)
doc.to_html
# => "<!DOCTYPE html PUBLIC \"-//W3C//DTD HTML 4.0 Transitional//EN\" \"http://www.w3.org/TR/REC-html40/loose.dtd\">\n<html><body>\n<p>First</p>\n<span><p>Second</p>\n<p>Third</p></span>\n\n</body></html>\n"

查看最初的 HTML，我不确定所提出的问题是否适用于普通的日常 HTML，但是，如果您绝对确定它永远不会改变

<p>...</p>
<p>...</p>
<p>...</p>

layout 那么你应该没问题。如果 HTML 真的类似于：

<div>
  <p>...</p>
  <p>...</p>
  <p>...</p>
</div>
...
<div>
  <p>...</p>
  <p>...</p>
  <p>...</p>
</div>

【讨论】：