If the diffString contains special symbols, the page will report an error

I found a bug, if diffString contains special template string symbols ` or , then the page will report an error and will not display normally

example one:

<!DOCTYPE html>
<html lang="en-us">
  <head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="github.min.css" />
     <link rel="stylesheet" type="text/css" href="diff2html.min.css" />
    <script type="text/javascript" src="diff2html-ui.min.js"></script>
  </head>
  <script>
    const diffString = `
--- a1.txt
+++ a2.txt
@@ -0,0 +0,0 @@
 11
 22
 33
@@ -4,1 +4,1 @@
-para1 = `fgjhk`;
+
 77
 88

`;

     document.addEventListener('DOMContentLoaded', function () {
      var targetElement = document.getElementById('myDiffElement');
      var configuration = {
        drawFileList: true,
        fileListToggle: true,
        fileListStartVisible: true,
        fileContentToggle: true,
        matching: 'lines',
        outputFormat: 'side-by-side',
        synchronisedScroll: true,
        highlight: true,
        renderNothingWhenEmpty: true,
      };
      var diff2htmlUi = new Diff2HtmlUI(targetElement, diffString, configuration);
      diff2htmlUi.draw();
      diff2htmlUi.highlightCode();
    });
  </script>
  <body>
    <div id="myDiffElement"></div>
  </body>
</html>

20230713101553

example two:

<!DOCTYPE html>
<html lang="en-us">
  <head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="github.min.css" />
     <link rel="stylesheet" type="text/css" href="diff2html.min.css" />
    <script type="text/javascript" src="diff2html-ui.min.js"></script>
  </head>
  <script>
    const diffString = `
--- c1.txt
+++ c2.txt
@@ -0,0 +0,0 @@
 <script>
       var x=5;
@@ -3,0 +3,1 @@
+      var y=6;
       document.write(x + "<br>");
@@ -4,0 +5,1 @@
+      document.write(y + "<br>");
 </script>
@@ -5,1 +7,0 @@
-

`;

     document.addEventListener('DOMContentLoaded', function () {
      var targetElement = document.getElementById('myDiffElement');
      var configuration = {
        drawFileList: true,
        fileListToggle: true,
        fileListStartVisible: true,
        fileContentToggle: true,
        matching: 'lines',
        outputFormat: 'side-by-side',
        synchronisedScroll: true,
        highlight: true,
        renderNothingWhenEmpty: true,
      };
      var diff2htmlUi = new Diff2HtmlUI(targetElement, diffString, configuration);
      diff2htmlUi.draw();
      diff2htmlUi.highlightCode();
    });
  </script>
  <body>
    <div id="myDiffElement"></div>
  </body>
</html>

20230713102018

The problem you have there is that it is not valid HTML and you can see that by looking at the console error it gives. If you make it valid like this, it works:

<!DOCTYPE html>
<html lang="en-us">
  <head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highlight.js@11.8.0/styles/github.min.css" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/diff2html@3.4.40/bundles/css/diff2html.min.css" />
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/diff2html@3.4.40/bundles/js/diff2html-ui.min.js"></script>
  </head>
  <script>
    const diffString =
      '--- c1.txt\n+++ c2.txt\n@@ -0,0 +0,0 @@\n <script>\n       var x=5;\n@@ -3,0 +3,1 @@\n+      var y=6;\n       document.write(x + "<br>");\n@@ -4,0 +5,1 @@\n+      document.write(y + "<br>");\n <\/script>\n@@ -5,1 +7,0 @@\n-';

    document.addEventListener("DOMContentLoaded", function () {
      var targetElement = document.getElementById("myDiffElement");
      var configuration = {
        drawFileList: true,
        fileListToggle: true,
        fileListStartVisible: true,
        fileContentToggle: true,
        matching: "lines",
        outputFormat: "side-by-side",
        synchronisedScroll: true,
        highlight: true,
        renderNothingWhenEmpty: true,
      };
      var diff2htmlUi = new Diff2HtmlUI(targetElement, diffString, configuration);
      diff2htmlUi.draw();
      diff2htmlUi.highlightCode();
    });
  </script>
  <body>
    <div id="myDiffElement"></div>
  </body>
</html>

rtfpessoa / diff2html

If the diffString contains special symbols, the page will report an error #495

example one:

example two: