如何使用 Nokogiri 在页面上创建 HTML 标记结构的大纲？答案

【问题标题】：How do I create an outline of the HTML tag structure on the page using Nokogiri?如何使用 Nokogiri 在页面上创建 HTML 标记结构的大纲？
【发布时间】：2011-08-24 13:19:14
【问题描述】：

我正在尝试使用 Nokogiri 创建 HTML 页面的标签结构大纲，我可以将其用作 html 页面内容是否已更改的指示器。

要做到这一点，基本上我想去掉所有的文本，只剩下 HTML 标签（没有属性）。

我们的想法是将其用作页面的草图，这是我使用的几个之一，以查看页面是否已更改。

完成后，我希望“草图”大致看起来像

<html><head></head><body><div></div><p><div></div></p></body></html>

以便可以将其与修订进行比较，以查看页面结构是否已更改。

有很多关于如何在 Nokogiri 中解析 dom 的示例。但是，仅仅列出它怎么样？

有什么想法吗？

【问题讨论】：

DOM 是一个非常基本的树结构：节点包含数据（属性、文本）并具有子节点。您是否考虑过如何序列化（列出）该结构？考虑一下您可能会如何做到这一点，并考虑用您尝试过的方法更新您的问题。

标签： html ruby html-parsing nokogiri

【解决方案1】：

这样的事情会做：

class Nokogiri::XML::Node

  def to_sketch
    children.find_all(&:element?).map(&:to_sketch).join
  end
end

class Nokogiri::XML::Element
  def to_sketch
    "<#{name}>#{super}</#{name}>"
  end
end

编辑一个例子

require 'nokogiri'
require 'open-uri'
Nokogiri::HTML(open('http://google.com')).to_sketch

"<html><head><meta></meta><title></title><script></script><style></style><script></script></head><body><textarea></textarea><div><div><nobr><b></b><a></a><a></a><a></a><a></a><a></a><a></a><a><u></u></a></nobr></div><div><nobr><span></span><span></span><span><a></a></span><a></a><a></a></nobr></div><div></div><div></div></div><center><br></br><div><a><img></img></a><br></br><br></br></div><form><table><tr><td></td><td><input></input><input></input><input></input><div><input></input></div><br></br><span><span><input></input></span></span><span><span><input></input></span></span></td><td><a></a><a></a></td></tr></table></form><div><br></br><div><font><a></a><a></a><a></a></font><br></br><br></br></div></div><div></div><span><center><div><div><a></a><a></a><a></a><a></a></div></div><p><a></a></p></center></span><div></div><div><script></script></div><script></script><script></script></center></body></html>"

【讨论】：