CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Kunal Mukherjee
Kunal Mukherjee

Reputation: 5853

Raw HTML string displaying along with tag names instead of rendering

I am trying to get the HTML text difference between 2 div(s).

Currently I am getting, all the selections, but the problem is they are being rendered as raw HTML along with the tag names.

See the screenshot below.

enter image description here

I have used multitude of approaches like document.createElement() and appending it to the .innerHTML property and jQuery $.parseHTML() method also. But I cannot seem to figure out why the HTML string is not rendered correctly.

Here is the code snippet that I have tried:

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

Here's a fiddle to my solution

Upvotes: 0

Views: 599

Answers (2)

hasan challawala
hasan challawala

Reputation: 24

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

Upvotes: 1

Simon Gomes
Simon Gomes

Reputation: 383

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('') );

And I believe it will work correctly. Check the updated fiddle.

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

Upvotes: 1

Related Questions