Question

我想将第一个div内容的文本与div中的图像组成的第二个div内容进行比较，并希望突出显示第二个div的不匹配文本。

下面是我的HTML div。

＆＃13;

<!-- div #1 -->
<div class="col-lg-12" id="oldversion">
  <p>this is an article one!!! Harsha</p>
  <p><br><img src="sample.jpg" style="max-width: 100% !important;max-height: 100% !important;" "width:=" " 867px;" class="fr-fic fr-dib"></p>
  <p>Hello world..</p>
  <p><br></p>
  <p><br><img src="sample1.jpg" style="max-width: 100% !important;max-height: 100% !important;" "width:=" " 737px;" class="fr-fic fr-dib"></p>
  <p><br></p>
</div>

<!-- div #2 -->
<div class="col-lg-12" id="newVersion">
  <p>this is an article two !!!</p>
  <p><br><img src="sample.jpg" style="max-width: 100% !important;max-height: 100% !important;" "width:=" " 867px;" class="fr-fic fr-dib"></p>
  <p>Hello world.. Naveen</p>
  <p><br></p>
  <p><br><img src="sample1.jpg" style="max-width: 100% !important;max-height: 100% !important;" "width:=" " 737px;" class="fr-fic fr-dib"></p>
  <p><br></p>
</div>

<div id="compared">


</div>

<div class="form-bottom">
            <button type="button" id="revert" onClick="articleHighlight();"class="btn btn-warning">
                <i class="fa fa-undo" aria-hidden="true"></i> Compare
            </button>
        </div>

＆＃13;

这是我到目前为止所尝试的内容，但它只是比较它没有显示图像的文字：

function articleHighlight() {
    var newText = $("#newVersion");
    var oldText = $("#oldversion");
    var text = "";
    try{
          newText.text().split("").forEach(function(value, index) {
          if (value != oldText.text().charAt(index))
             text += "<span class='highlight text-danger'>" + value + "</span>";
          else
             text += value;
      });
}
catch (ex){
         alert("exception");
   }
       $("#compared").html(text);
}

任何帮助将不胜感激

Jsfiddle

Answer 1

使用.html()代替.text()来比较innerHTML而不是innerText：

var newText = newVersion.html();
var oldText = oldVersion.html();

不要两次.text() / .html()，重复使用它：

newText.split("").forEach(function(value, index) {
    //your code
});

而不是将每个字符放入单独的span中，您应该只存储索引的间隔，这样您就可以知道匹配的开始位置和结束时间。此外，您还需要将span包围在匹配项中，并确保创建此类标记并设置其innerText而不是innerHTML，因此您将看到每个字符而不是html标签

比较两个DIV并使用javascript突出显示不匹配的内容

1 个答案: