Как лучше всего сравнить две HTML страницы с одинаковыми данными, но разной разметкой?

Question

Мне нужно сравнить две html страницы для данных. Страницы разработаны с использованием React, но разметка отличается. Тем не менее, содержание на этих страницах то же самое. Каков наилучший способ сравнить эти страницы? Я только хочу сравнить текстовые данные.

Мне нужно сравнить несколько страниц. Является ли написание конкретных c селекторов, извлечение значений и сравнение их единственное решение?

Answer 1

До сих пор неясно, где вы собираетесь выполнять проверку.

Сравнение текстовых данных 2 элементов выполняется напрямую с помощью свойства 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>

Теперь, когда вам нужно сравнить одну страницу с другой по целому rnet, лучше вычислить га sh обеих страниц. и сравните га sh для проверки на равенство.

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>

Ссылки

• Сравнение длинных строк - { ссылка }
• Генерация га sh из строки в JS - { ссылка }