比较具有相同数据但标记不同的两个 HTML 页面的最佳方法是啥

Posted 2023-05-09

【中文标题】比较具有相同数据但标记不同的两个 HTML 页面的最佳方法是啥

【英文标题】：What is the best way to compare two HTML pages with same data but different markup比较具有相同数据但标记不同的两个 HTML 页面的最佳方法是什么

【发布时间】：2020-08-05 00:38:07

【问题描述】：

我需要比较两个 html 页面的数据。页面是使用 React 开发的，但标记不同。但是，这些页面中的内容是相同的。比较这些页面的最佳方法是什么？我只是想比较文本数据。

我需要比较多个页面。编写特定的选择器，提取值并比较它们是唯一的解决方案吗？

【问题讨论】：

您能否详细说明您的要求？是否有非文本数据可以比较？如果仅是文本数据，并且除了标记之外内容完全相同，您可以尝试从网页中提取文本并计算哈希值。比较页面间的哈希值以检查相等性。

@ShanEapenKoshy：我只是想比较文本数据。如何仅提取数据？我是否需要使用选择器而不是提取值。请详细说明。

【参考方案1】：

目前还不清楚您将在哪里进行检查。

借助element.innerText 属性可以直接比较两个元素的文本数据。

var page1 = document.getElementById('page1');
var page2 = document.getElementById('page2');
var result = document.getElementById('result');

if (page1.innerText !== page2.innerText) 
  result.innerHTML = "Pages are different";
 else 
  result.innerHTML = "Pages are same";

<!-- Page 1 -->
<div id='page1'>
  <strong style="margin: 0px; padding: 0px;">Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry&#39;s standard dummy text ever since the 1500s, when an unknown printer took a galley of
  type and scrambled it to make a type specimen book.
</div>

<br><br>

<!-- Page 2 -->
<div id='page2'>
  <div class="different markup"></div>
  <em style="margin: 0px; padding: 0px;">Lorem Ipsum</em> <b>is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry&#39;s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</b>
</div>

<br>
<h3 id="result" style="color:red;"></h3>

现在，当您必须在互联网上比较一个页面与另一个页面时，最好计算两个页面的哈希值并比较哈希值以进行相等性检查。

Object.defineProperty(String.prototype, 'hashCode', 
  value: function() 
    var hash = 0, i, chr;
    for (i = 0; i < this.length; i++) 
      chr   = this.charCodeAt(i);
      hash  = ((hash << 5) - hash) + chr;
      hash |= 0; // Convert to 32bit integer
    
    return hash;
  
);

var page1Hash = document.getElementById('page1').innerText.hashCode();
var page2Hash = document.getElementById('page2').innerText.hashCode();

var result = document.getElementById('result');

if (page1Hash !== page2Hash) 
  result.innerHTML = "Pages are different";
 else 
  result.innerHTML = "Pages are same";

<!-- Page 1 -->
<div id='page1'>
  <strong style="margin: 0px; padding: 0px;">Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry&#39;s standard dummy text ever since the 1500s, when an unknown printer took a galley of
  type and scrambled it to make a type specimen book.
</div>

<br><br>

<!-- Page 2 -->
<div id='page2'>
  <div class="different markup"></div>
  <em style="margin: 0px; padding: 0px;">Lorem Ipsum</em> <b>is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry&#39;s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</b>
</div>

<br>
<h3 id="result" style="color:red;"></h3>

参考文献

比较长字符串 - https://***.com/a/40014929/3284379 从 JS 中的字符串生成哈希 - https://***.com/a/7616484/3284379