如何找出两个HTML文档中不同的部分并能够定位出来?

WBOY
Release: 2016-06-06 20:48:26
Original
1219 people have browsed it

标题说的可能有点抽象,举个例子说明下。
网页A(部分):

<code class="lang-html"><div>
  <span class="title">pageA</span>
  <div id="content">XXXXX</div>
  <span class="lastupdate">2013-11-21</span>
</div>
</code>
Copy after login
Copy after login

网页B(部分):

<code class="lang-html"><div>
  <span class="title">pageB</span>
  <div id="content">XXXXX</div>
  <span class="lastupdate">2013-11-20</span>
</div>
</code>
Copy after login
Copy after login

网页C(部分):

<code class="lang-html"><div>
  <span class="title">pageC</span>
  <div id="content">YYYYY</div>
  <span class="lastupdate">2013-11-19</span>
</div>
</code>
Copy after login
Copy after login

人工对比下可以发现网页A与B对比的话,.title和.lastupdate这两个span里的值不一样。我需要实现的就是能够通过代码识别出这两个位置,并且能够根据这个位置在网页C中提取出pageC和2013-11-19

p.s. 本问题不指定某个特殊语言,主要是探讨下思路。回答最好不要过于依赖某个语言自己独有的包或者类库。
再p.s. 我自己打算最终用node.js或者php实现。如果回答是别的语言的话我会自己“翻译”的,不用担心~


基于回答补充以下内容:
1.不同的定义仅局限在内容的不同,保证被比较的两者整个网页大体的结构是稳定一致的。
2.网页内可能会存在不规则的标签,包括但不限于未闭合的标签(如漏写一个)、自己定义一个标签类别()

回复内容:

标题说的可能有点抽象,举个例子说明下。
网页A(部分):

<code class="lang-html"><div>
  <span class="title">pageA</span>
  <div id="content">XXXXX</div>
  <span class="lastupdate">2013-11-21</span>
</div>
</code>
Copy after login
Copy after login

网页B(部分):

<code class="lang-html"><div>
  <span class="title">pageB</span>
  <div id="content">XXXXX</div>
  <span class="lastupdate">2013-11-20</span>
</div>
</code>
Copy after login
Copy after login

网页C(部分):

<code class="lang-html"><div>
  <span class="title">pageC</span>
  <div id="content">YYYYY</div>
  <span class="lastupdate">2013-11-19</span>
</div>
</code>
Copy after login
Copy after login

人工对比下可以发现网页A与B对比的话,.title和.lastupdate这两个span里的值不一样。我需要实现的就是能够通过代码识别出这两个位置,并且能够根据这个位置在网页C中提取出pageC和2013-11-19

p.s. 本问题不指定某个特殊语言,主要是探讨下思路。回答最好不要过于依赖某个语言自己独有的包或者类库。
再p.s. 我自己打算最终用node.js或者php实现。如果回答是别的语言的话我会自己“翻译”的,不用担心~


基于回答补充以下内容:
1.不同的定义仅局限在内容的不同,保证被比较的两者整个网页大体的结构是稳定一致的。
2.网页内可能会存在不规则的标签,包括但不限于未闭合的标签(如漏写一个)、自己定义一个标签类别()

首先,解析 HTML 有两种办法:

一种是基于事件回调的:比如 python 的 HTMLParser 和 PHP 的 SimpleXML。它在遇到 starttag、endtag 以及遇到 text node 时就调用你指定的函数。

第二种是建立起一个完整的 DOM 树,让你进行 DOM 操作。


现在的问题就是应该怎么定义“不同”。

如果你指的只是 text node 的 text content 不同,而 node tree 的结构完全相同的话,就很容易了,此时你可以使用第一种解析 HTML 的方法;只需要把第一个页面所有的 text node 按顺序存下来;然后把第二个 HTML 的所有 text node 与之一一比对就 ok 了。

如果页面结构都不同的话,就会复杂些。这种情况下可以用第二种解析 HTML 的方法建立起 DOM 树;然后可以一层一层递归地比对innerHTML:具体来说,比如你先比对的 innerHTML。如果不一致的话,就一一比对其下所有元素的innerHTML。然后把其中innerHTML相同的节点忽略;对innerHTML不相同的节点再递归地进行处理。如果遇到某个元素在两个文档里的childNode数量不一的情况……那就看你想怎么办了。


好吧以上其实全部是我在意淫,毫无依据。就当抛砖引玉吧。

https://github.com/chrisboulton/php-diff

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template