Skip to content
Related Articles

Related Articles

What is the best way to compare two HTML pages with same data but different markup?
  • Difficulty Level : Expert
  • Last Updated : 05 Feb, 2021
GeeksforGeeks - Summer Carnival Banner

In this article, we will be learning about the best way to compare two HTML pages with the same data but different markup. At first, we need to know how to compare two HTML pages. Now, the most efficient way to check both the pages is to use the hash code of both the page contents and compare it for equality.

JavaScript hashCode(): In order to implement hashCode() in JavaScript we need to create a function that would generate hashed codes.

Now, hash code is generally formed by the following implementation.

s[0]*31^(n-1) + s[1]*31^(n-2) + ... + s[n-1]

JavaScript code for the hash function:

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;
         }
    });

The line that contains (hashValue << 5) is same as (hashValue * 31 + char). So (hashValue <<5) is hashValue * 32 and ((hashValue << 5)-hashValue) is hashValue *31. Writing it in this format just makes it faster and increases its efficiency.

After generating the function we need to extract the contents of the two pages and generate hash codes of the following. If both of them matches then both are the same or else they are different. The result is shown by an alert message using JavaScript innerHTML() function. 

HTML code:

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 recomended 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 recomended 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>

Output:

If the contents are different, then a different output will be shown. In the second example, the faster approach is used.

Example 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 recomended 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>

Output:

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :