Open In App

What is the best way to compare two HTML pages with same data but different markup?

Improve
Improve
Like Article
Like
Save
Share
Report

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


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


Output:



Last Updated : 01 Jul, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads