En este artículo, aprenderemos sobre la mejor manera de comparar dos páginas HTML con los mismos datos pero con marcas diferentes. Primero, necesitamos saber cómo comparar dos páginas HTML. Ahora, la forma más eficiente de verificar ambas páginas es usar el código hash de ambos contenidos de la página y compararlos para ver si son iguales.
JavaScript hashCode(): para implementar hashCode() en JavaScript, necesitamos crear una función que genere códigos hash.
Ahora, el código hash generalmente está formado por la siguiente implementación.
s[0]*31^(n-1) + s[1]*31^(n-2) + ... + s[n-1]
Código JavaScript para la función hash:
Javascript
// Generate a hash code or string
Object.defineProperty(String.prototype, 'hashCode', {
value: function()
{
var hashValue = 0;
var i, code;
for (i = 0; i < this.length; i++)
{
// Returns the unicode of first character
code = this.charCodeAt(i);
hashValue = ((hashValue << 5) - hashValue) + code;
hashValue |= 0;
}
return hashValue;
}
});
La línea que contiene (hashValue << 5) es la misma que ( hashValue * 31 + char). Entonces (hashValue <<5) es hashValue * 32 y ((hashValue << 5)-hashValue) es hashValue *31. Escribirlo en este formato solo lo hace más rápido y aumenta su eficiencia.
Después de generar la función, necesitamos extraer el contenido de las dos páginas y generar códigos hash de lo siguiente. Si ambos coinciden, entonces ambos son iguales o son diferentes. El resultado se muestra mediante un mensaje de alerta utilizando la función JavaScript innerHTML() .
Código HTML:
HTML
<!DOCTYPE html>
<html>
<body>
<!-- The first page content -->
<div id="pageID1">
<strong style="margin: 0px; padding: 0px"> GeeksforGeeks </strong>
is a computer science portal that contains articles on mordern
technologies as well as programming.It also helps us to prepare for
various competitive programming competitions as well. So,that's why,
GeeksforGeeks is recommended for every student out there who is eager to
learn about new things related to mordern technology.
</div>
<br /><br />
<!-- The second page content -->
<div id="pageID2">
<div class="different markup"></div>
<i style="margin: 0px; padding: 0px">GeeksforGeeks</i>
<b
>is a computer science portal that contains articles on mordern
technologies as well as programming.It also helps us to prepare for
various competitive programming competitions as well. So,that's why,
<em style="color: green">GeeksforGeeks</em> is recommended for every
student out there who is eager to learn about new things related to
mordern technology.</b
>
</div>
<br />
<!--The comparison result is shown here -->
<h3 id="compareResultID" style="color: green"></h3>
<script>
// Generate a hash code or string
Object.defineProperty(String.prototype, "hashCode", {
value: function () {
var hashValue = 0;
var i, code;
for (i = 0; i < this.length; i++) {
// Returns the unicode of first character
code = this.charCodeAt(i);
hashValue = hashValue * 32 - hashValue + code;
hashValue |= 0;
}
return hashValue;
},
});
var hashValue1 = document.getElementById("pageID1").innerText.hashCode();
var hashValue2 = document.getElementById("pageID2").innerText.hashCode();
if (hashValue1 !== hashValue2) {
document.getElementById("compareResultID").innerHTML =
"They are different Pages";
} else {
document.getElementById("compareResultID").innerHTML = "Same Pages";
}
</script>
</body>
</html>
Producción:
Si los contenidos son diferentes, se mostrará una salida diferente. En el segundo ejemplo, se utiliza el enfoque más rápido .
Ejemplo 2:
HTML
<!DOCTYPE html>
<html>
<body>
<!-- The first page content -->
<div id="pageID1">
<strong style="margin: 0px; padding: 0px"> GeeksforGeeks </strong>
is a computer science portal that contains articles on mordern
technologies as well as programming.It also helps us to prepare for
various competitive programming competitions as well. So,that's why,
GeeksforGeeks is recommended for every student out there who is eager to
learn about new things related to mordern technology.
</div>
<br /><br />
<!-- The second page content -->
<div id="pageID2">
<div class="different markup"></div>
<i style="margin: 0px; padding: 0px">GeeksforGeeks</i>
</div>
<br />
<!--The comparison result is shown here -->
<h3 id="compareResultID" style="color: green"></h3>
<script>
// Generate a hash code or string
Object.defineProperty(String.prototype, "hashCode", {
value: function () {
var hashValue = 0;
var i, code;
for (i = 0; i < this.length; i++) {
// Returns the unicode of first character
code = this.charCodeAt(i);
hashValue = (hashValue << 5) - hashValue + code;
hashValue |= 0;
}
return hashValue;
},
});
var hashValue1 = document.getElementById("pageID1").innerText.hashCode();
var hashValue2 = document.getElementById("pageID2").innerText.hashCode();
if (hashValue1 !== hashValue2) {
document.getElementById("compareResultID").innerHTML =
"Different Pages";
} else {
document.getElementById("compareResultID").innerHTML =
"They are same Pages";
}
</script>
</body>
</html>
Producción:
