Exploring the Contrasts Between HTML String and Emphasizing the Variances

Question

Exploring the Contrasts Between HTML String and Emphasizing the Variances

Challenge Description: The task is to compare two HTML input strings with various styling elements like strong, li, ol, line-through, etc. The goal is to display the original text and the edited text in two separate boxes on the screen. Any words missing in the edited text compared to the original text should be highlighted in red, while any additional words in the edited text should be highlighted in yellow.

https://i.sstatic.net/SKBT0.jpg

Expected Outcome: The first box should highlight deleted text in red, and the second box should highlight edited text in yellow.

https://i.sstatic.net/F86EH.jpg

Approached Solutions: 1. Experimented with the Diff Match Patch library, but encountered issues due to the presence of HTML tags in the input strings. Stripping the tags would result in loss of styling. 2. Attempted to use the HtmlDiff library, but it provided deleted and modified words in a single string, making it challenging to customize. Any guidance or assistance on this matter would be greatly appreciated. Thank you.

javascript jquery html css google-diff-match-patch

Answer 1

Answer №1

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<style>
html, body {
  font: normal 14px/1.4 sans-serif;
  background: #f1f1f1;
}

p {
  margin: 0 0 1rem;
}

ins {
  background: lightgreen;
  text-decoration: none;
}

del {
  background: pink;
}

table {
  border-collapse: collapse;
  width: 100%;
}
table td{
  border: 1px solid #ccc;
}

.card {
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 3px;
  margin: 1rem;
  padding: 1rem;
}

.card .card {
  margin: 0;
  flex: 1 0 0;
}

.row {
  display: flex;
  justify-content: space-between;
  margin-right: -8px;
}

.col {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  margin-right: 8px;
}
</style>
</head>
<body>
<div class="card">
  <div class="row">
    <div class="col">
      <h4>Old Version</h4>
      <div class="card" id="outputOriginal"></div>
    </div>
    <div class="col">
      <h4>Changes</h4>
      <div class="card" id="output"></div>
    </div>
    <div class="col">
      <h4>New Version</h4>
      <div class="card" id="outputNew"></div>
    </div>
  </div>
</div>

</body>
</html>
<script>

  // The JavaScript code for HTML diff goes here...

</script>

Answer 2

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<style>
html, body {
  font: normal 14px/1.4 sans-serif;
  background: #f1f1f1;
}

p {
  margin: 0 0 1rem;
}

ins {
  background: lightgreen;
  text-decoration: none;
}

del {
  background: pink;
}

table {
  border-collapse: collapse;
  width: 100%;
}
table td{
  border: 1px solid #ccc;
}

.card {
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 3px;
  margin: 1rem;
  padding: 1rem;
}

.card .card {
  margin: 0;
  flex: 1 0 0;
}

.row {
  display: flex;
  justify-content: space-between;
  margin-right: -8px;
}

.col {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  margin-right: 8px;
}
</style>
</head>
<body>
<div class="card">
  <div class="row">
    <div class="col">
      <h4>Old Version</h4>
      <div class="card" id="outputOriginal"></div>
    </div>
    <div class="col">
      <h4>Changes</h4>
      <div class="card" id="output"></div>
    </div>
    <div class="col">
      <h4>New Version</h4>
      <div class="card" id="outputNew"></div>
    </div>
  </div>
</div>

</body>
</html>
<script>

  // The JavaScript code for HTML diff goes here...

</script>

Answer 3

Answer №2

To simplify the comparison of HTML code strings, you can split the text into arrays of strings and compare them manually.

For instance, in tackling part 1 of your issue, you can compare words (string arrays) and introduce a span with the class highlightRed to change the background to red.

Here's an example to reference: https://codepen.io/vck3000/pen/xYeLKq/?editors=1111

//retrieve the strings
var div1Text = document.querySelector("#div1").innerHTML;
var div2Text = document.querySelector("#div2").innerHTML;

//split the strings
var div1TextSplitted = div1Text.split(" ");
var div2TextSplitted = div2Text.split(" ");

//variables to iterate through the split string
var wordNumber1 = 0;
var wordNumber2 = 0;

//new strings to reassign to the divs
var newDiv1Text = "";
var newDiv2Text = "";

//Part 1: Red highlight
while(true){
  //if a non-matching word is found
  if(div1TextSplitted[wordNumber1] !== div2TextSplitted[wordNumber2]){
    //insert a span
    newDiv1Text += "<span class='highlightRed'>" + div1TextSplitted[wordNumber1] + "</span> ";
    //increment the variables
    wordNumber2++;
    wordNumber1++;
  }
  //if the text matches
  else{
    //append the same text without changes
    newDiv1Text += div1TextSplitted[wordNumber1] + " ";
    //increment variables
    wordNumber1++;
    wordNumber2++;
  }

  //stop the loop if either string reaches the end
  if(div1TextSplitted[wordNumber1 + 1] === undefined || div2TextSplitted[wordNumber2 + 1] === undefined){
    break;
  }
}

//reassign the modified text to the div
document.querySelector("#div1").innerHTML = newDiv1Text;

Part 2 (yellow highlight) poses a similar challenge but is slightly more complex. Try to solve it on your own.

Answer 4

To simplify the comparison of HTML code strings, you can split the text into arrays of strings and compare them manually.

For instance, in tackling part 1 of your issue, you can compare words (string arrays) and introduce a span with the class highlightRed to change the background to red.

Here's an example to reference: https://codepen.io/vck3000/pen/xYeLKq/?editors=1111

//retrieve the strings
var div1Text = document.querySelector("#div1").innerHTML;
var div2Text = document.querySelector("#div2").innerHTML;

//split the strings
var div1TextSplitted = div1Text.split(" ");
var div2TextSplitted = div2Text.split(" ");

//variables to iterate through the split string
var wordNumber1 = 0;
var wordNumber2 = 0;

//new strings to reassign to the divs
var newDiv1Text = "";
var newDiv2Text = "";

//Part 1: Red highlight
while(true){
  //if a non-matching word is found
  if(div1TextSplitted[wordNumber1] !== div2TextSplitted[wordNumber2]){
    //insert a span
    newDiv1Text += "<span class='highlightRed'>" + div1TextSplitted[wordNumber1] + "</span> ";
    //increment the variables
    wordNumber2++;
    wordNumber1++;
  }
  //if the text matches
  else{
    //append the same text without changes
    newDiv1Text += div1TextSplitted[wordNumber1] + " ";
    //increment variables
    wordNumber1++;
    wordNumber2++;
  }

  //stop the loop if either string reaches the end
  if(div1TextSplitted[wordNumber1 + 1] === undefined || div2TextSplitted[wordNumber2 + 1] === undefined){
    break;
  }
}

//reassign the modified text to the div
document.querySelector("#div1").innerHTML = newDiv1Text;

Part 2 (yellow highlight) poses a similar challenge but is slightly more complex. Try to solve it on your own.

Exploring the Contrasts Between HTML String and Emphasizing the Variances

Answer №1

Answer №2

Similar questions

In what way does this closure cause componentDidUpdate to mimic the behavior of useEffect?

Can you target an 'input' field that is within a component conditionally rendered using 'v-if'?

Building a dynamic form in React: Fetching select data from an API, posting to another API, and automatically clearing fields upon submission

Having trouble retrieving the NextAuth session data within Next.js 12 middleware

Populate the content of the child DIV to match the grid layout as a whole

Close the overlay by clicking outside of it

"Exploring the world of jQuery and the array data structure

Tips on adding a date range selection or multi-date selection capability within a single Kendo calendar

The shadow feature in Three.js doesn't seem to be functioning properly

Steps for creating a fixed menu bar that remains stationary while scrolling

Adjust the top margin of content to account for the height of a fixed header

Counting words with JavaScript without using an input tag is a useful skill

Looking for an image that spans the entire height of the container

What is the best way to prevent using a function expression in order to return a local variable within an AngularJS factory?

What is the method for programming a Discord bot to respond to your messages?

"Ionic offers a seamless integration of both side menu and tabs for enhanced navigation

Tips for keeping the scrollbar permanently at the bottom in JavaScript?

What is the jQuery equivalent for converting this JavaScript code?

What is the best way to refresh updated .js files directly from the browser console?

Updating CSS for dropdown menu in Fluent/Fabric design