JSFiddle - React, Tailwind, and code Playground

by Dhanck

HTML

<div id="scafolding"></div>

<div class="all">
<div id='open_ender_output' class="div1" data-index="1">
  <h2>
      <a href="http://www.bbc.co.uk/news/blogs/the_papers">The Papers</a>
    </h2>
    <div>
      <div>
        <div>
          <div>
            <img src="https://ichef.bbci.co.uk/news/235/cpsprodpb/461A/production/_103664971_index.jpg">
          </div>
        </div>

        <div>
          <h3>

            <span>Braxit, Boris Johnson, and a field of wheat</span>
          </h3>
          <p>Multiple papers today focused on Boris Johnsos speech at the Tory conference - and his morning run.</p>
          <div>

            <ul>
              <li>
                <div>5 hours ago</div>
              </li>
            </ul>
  
</div>
<div id='open_ender_output2' class="div2" data-index="2">
  
</div>
</div>

CSS

/* .highlight {
    color: blue;
    background:#fff0f0;
    border:1px solid #ffd6d6;
} */


.highlight {
    color: blue;
    background: #fff0f0;
    border: 1px solid #ffd6d6;
    border-right: 0;
    border-left: 0;
}
.div1, .div2{
  height: 950px;
  width: 46%;
  border: 1px solid rgb(169, 169, 169);
  float:left;
  margin:1%;
}

JavaScript

var openEnderContent = $('#open_ender_output').prop('outerHTML');

var openEnderContent2 = '&lt;p&gt;&lt;span style="color: #ff0000;"&gt;Dan&lt;/span&gt;!!!!!&lt;strong&gt;666667777666&lt;/strong&gt;&lt;/p&gt';


$('#open_ender_output').html(
  // create an element where the html content as the string
  $('<div/>', {
    html: openEnderContent
  // get text content from element for decoded text  
  }).text()
)

$('#open_ender_output2').html(
  // create an element where the html content as the string
  $('<div/>', {
    html: openEnderContent2
  // get text content from element for decoded text  
  }).text()
)
/* 
if($('#open_ender_output').html() != $('#open_ender_output2').html()){
  $('#open_ender_output2').css({'background':'green'});
} */


highlight($("#open_ender_output"), $("#open_ender_output2"));

function highlight(newElem, oldElem){ 
    var newText = newElem.text();
    var oldText = oldElem.text();
     
    var text = "";
    newElem.text().split("").forEach(function(value, index){
        if (value != oldText.charAt(index))
            text += "<span class='highlight'>" + value + "</span>";         
        else
            text += value;
    });
    newElem.html(text);
}