html - 比较具有相同数据但标记不同的两个 HTML 页面的最佳方法是什么
问题描述
我需要比较两个 html 页面的数据。页面是使用 React 开发的,但标记不同。但是,这些页面中的内容是相同的。比较这些页面的最佳方法是什么?我只是想比较文本数据。
我需要比较多个页面。编写特定的选择器、提取值并比较它们是唯一的解决方案吗?
解决方案
目前尚不清楚您将在哪里进行检查。
在属性的帮助下比较两个元素的文本数据是直接的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'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'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>
现在,当您必须在 Internet 上将一个页面与另一个页面进行比较时,最好计算两个页面的哈希值并比较哈希值以进行相等性检查。
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'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'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
推荐阅读
- sql - 为什么 SUM 值在 postgresql 查询中是错误的?
- python - 处理传播错误
- java - 为什么 toCharArray() 和 toString() 方法不起作用
- python - 切换散景服务 hbar 图的数据源不起作用:空白图
- python - Python:使用递归查找在字典中实现的二叉树的大小
- javascript - 在 Nuxt 中使用 Vuex
- bash - 在bash中的数字和点之后添加一个字符
- python - 引发除了错误
- python - 未找到带有参数“(12,)”的“编辑”的反向。尝试了 1 种模式:['edit$']
- twilio - 有没有办法从 Twilio 中转移电话号码?