原始HTML字符串与标记名称一起显示而不是呈现

Question

我试图获得2个div之间的HTML文本差异。

目前我正在获取所有选择，但问题是它们与标记名称一起呈现为原始HTML。

请参见下面的截图。

---

我使用了许多方法，如document.createElement()，并将其附加到.innerHTML属性和jQuery $.parseHTML()方法。但我似乎无法弄清楚为什么HTML字符串没有正确呈现。

---

这是我尝试过的代码片段：

$(function() {
  $("#btnCompareText").click(function() {

    let originalString = $("#originalResult")[0].innerHTML;
    let modifiedString = $("#modifiedResult")[0].innerHTML;

    let dmp = new diff_match_patch();
    let diff = dmp.diff_main(originalString, modifiedString);

    let result = extractContents(diff);

    let html1 = $.parseHTML(result.OriginalDivContents); //This is not happening correctly
    let html2 = $.parseHTML(result.ModifiedDivContents); //This is not happening correctly

    $("#originalText").append(html1); //This is not happening correctly
    $("#modifiedText").append(html2); //This is not happening correctly


  });

  function extractContents(tokenizedArray) {

    let c = /&/g,
      d = /</g,
      e = />/g,
      f = /\n/g;
    let finalArray = new Array();
    for (let g = 0; g < tokenizedArray.length; g++) {
      let textType = tokenizedArray[g][0],
        value = tokenizedArray[g][1].replace(c, "&amp;").replace(d, "&lt;").replace(e, "&gt;").replace(f, "&para;<br>");
      switch (textType) {
        case 1:
          finalArray.push({
            Index: g,
            TextType: 1,
            Value: `<span style="background:#e6ffe6;">${value}</span>`
          });
          break;
        case -1:
          finalArray.push({
            Index: g,
            TextType: -1,
            Value: `<span style="background:#ffe6e6;">${value}</span>`
          });
          break;
        case 0:
          finalArray.push({
            Index: g,
            TextType: 0,
            Value: `<span>${value}</span>`
          });
      }
    }



    //console.log(JSON.stringify(finalArray, undefined, 4));

    let OriginalDivContents = "";
    for (let i = 0; i < finalArray.length; i++) {
      if (finalArray[i].TextType == 0)
        OriginalDivContents += finalArray[i].Value;
      if (finalArray[i].TextType == -1)
        OriginalDivContents += finalArray[i].Value;
    }

    let ModifiedDivContents = "";
    for (let i = 0; i < finalArray.length; i++) {
      if (finalArray[i].TextType == 0)
        ModifiedDivContents += finalArray[i].Value;
      if (finalArray[i].TextType == 1)
        ModifiedDivContents += finalArray[i].Value;
    }

    //console.log(OriginalDivContents);
    //console.log(ModifiedDivContents);

    return {
      OriginalDivContents: OriginalDivContents,
      ModifiedDivContents: ModifiedDivContents
    };
  }


});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/diff_match_patch/20121119/diff_match_patch.js"></script>



<div id="originalResult">
  <p><strong>Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type</p>
</div>
<div id="modifiedResult">
  <p><strong>Lorem Ipsum</strong> is simply dummy text of <strong>the</strong> printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type test scrambled it
    to make a type added</p>
  <ul>
    <li>test</li>
  </ul>
</div>

<button id="btnCompareText" class="btn btn-primary">Compare Text</button>

<div id="originalText">
</div>

<div id="modifiedText">
</div>

这是一个fiddle to my solution

---

Answer 1

Change this

    let html1 = $.parseHTML(result.OriginalDivContents); //This is not happening correctly
    let html2 = $.parseHTML(result.ModifiedDivContents); //This is not happening correctly

    $("#originalText").append(html1); //This is not happening correctly
    $("#modifiedText").append(html2); //This is not happening correctly

To this

    let html1 = $.parseHTML(result.OriginalDivContents); //This is not happening correctly
    let html2 = $.parseHTML(result.ModifiedDivContents); //This is not happening correctly

    html1 = html1.map( html => { return html.innerText } );
    html2 = html2.map( html => { return html.innerText } );

    $( "#originalText" ).append( html1.join('') );
    $( "#modifiedText" ).append( html2.join('') );

而且我相信它会正常运作。检查更新的小提琴。

https://jsfiddle.net/dh6f2muo/21/

Answer 2

$(function() {
  $("#btnCompareText").click(function() {

    let originalString = $("#originalResult")[0].innerHTML;
    let modifiedString = $("#modifiedResult")[0].innerHTML;

    let dmp = new diff_match_patch();
    let diff = dmp.diff_main(originalString, modifiedString);

    let result = extractContents(diff);

    let html1 = $.parseHTML($.trim(result.OriginalDivContents)); //This is not happening correctly
    let html2 = $.parseHTML($.trim(result.ModifiedDivContents)); //This is not happening correctly

    $("#originalText").append(html1); //This is not happening correctly
    $("#modifiedText").append(html2); //This is not happening correctly


  });

  function extractContents(tokenizedArray) {

    let c = /&/g,
      d = /</g,
      e = />/g,
      f = /\n/g;
    let finalArray = new Array();
    for (let g = 0; g < tokenizedArray.length; g++) {
      let textType = tokenizedArray[g][0],
        value = tokenizedArray[g][1].replace(c, "&amp;").replace(d, "<").replace(e, ">").replace(f, "&para;<br>");
      switch (textType) {
        case 1:
          finalArray.push({
            Index: g,
            TextType: 1,
            Value: `<span style="background:#e6ffe6;">${value}</span>`
          });
          break;
        case -1:
          finalArray.push({
            Index: g,
            TextType: -1,
            Value: `<span style="background:#ffe6e6;">${value}</span>`
          });
          break;
        case 0:
          finalArray.push({
            Index: g,
            TextType: 0,
            Value: `<span>${value}</span>`
          });
      }
    }



    //console.log(JSON.stringify(finalArray, undefined, 4));

    let OriginalDivContents = "";
    for (let i = 0; i < finalArray.length; i++) {
      if (finalArray[i].TextType == 0)
        OriginalDivContents += finalArray[i].Value;
      if (finalArray[i].TextType == -1)
        OriginalDivContents += finalArray[i].Value;
    }

    let ModifiedDivContents = "";
    for (let i = 0; i < finalArray.length; i++) {
      if (finalArray[i].TextType == 0)
        ModifiedDivContents += finalArray[i].Value;
      if (finalArray[i].TextType == 1)
        ModifiedDivContents += finalArray[i].Value;
    }

    //console.log(OriginalDivContents);
    //console.log(ModifiedDivContents);

    return {
      OriginalDivContents: OriginalDivContents,
      ModifiedDivContents: ModifiedDivContents
    };
  }


});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/diff_match_patch/20121119/diff_match_patch.js"></script>



<div id="originalResult">
  <p><strong>Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type</p>
</div>
<div id="modifiedResult">
  <p><strong>Lorem Ipsum</strong> is simply dummy text of <strong>the</strong> printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type test scrambled it
    to make a type added</p>
  <ul>
    <li>test</li>
  </ul>
</div>

<button id="btnCompareText" class="btn btn-primary">Compare Text</button>

<div id="originalText">
</div>

<div id="modifiedText">
</div>