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

Question

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

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

Answer 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://stackoverflow.com/a/40014929/3284379
• 从 JS 中的字符串生成哈希 - https://stackoverflow.com/a/7616484/3284379