javascript - 我无法使用 Google 的库(名为 diff_match_patch)比较两个文本文件

标签 javascript jquery html google-diff-match-patch

我正在尝试使用 Google 的库(名为 diff_match_patch)来比较两个文本文件。在 HTML 和 JavaScript 中。但我无法区分两个文本文件之间的差异。我正在使用以下代码来比较文本。

<!DOCTYPE html>
<html>
  <head>
    <title>Slide Panel</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script src="jquery.min.js" type="text/javascript"> </script>
    <script src="diff_match_patch.js" type="text/javascript"> </script>
    <script src="deal_override_requests.min.js" type="text/javascript"> </script>
    <script src="jquery.pretty-text-diff.min.js" type="text/javascript"> </script>
    <script src="jquery.pretty-text-diff.js" type="text/javascript"> </script>
    <link rel="stylesheet" type="text/css" href="stylesheet.css" />
    <script>
      $("input[type=button]").click(function () {
        $("#wrapper tr").prettyTextDiff({
          cleanup: $("#cleanup").is(":checked")
        });
      });
    </script>
  </head>
  <body>
    <div id="wrapper">
      <h3>
        Demo of jQuery.PrettyTextDiff
      </h3>
      <table class="table table-striped table-bordered table-hover">
        <thead>
          <tr>
            <th>Original</th>
            <th>Changed</th>
            <th>Diff</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td class="original">This si text 1</td>
            <td class="changed">This is text one</td>
            <td class="diff"></td>
          </tr>
          <tr>
            <td class="original">Today is Jan the 24th, 2013</td>
            <td class="changed">Today is January the 25th of the year 2013</td>
            <td class="diff"></td>
          </tr>
          <tr>
            <td class="original">A mouse is here</td>
            <td class="changed">A sofa is here</td>
            <td class="diff"></td>
          </tr>
        </tbody>
      </table>
      <div>
        <input type='button' class='btn btn-primary' value='Diff' />
      </div>
    </div>
  </body>
</html>

请帮我解决这个问题。

最佳答案

您的代码中存在一些问题,例如多个 jquery 引用、多个 Pretty-text-diff 引用等。

这是一个固定且有效的代码片段:

$("input[type=button]").click(function () {
  $("#wrapper tr").prettyTextDiff({
    cleanup: $("#cleanup").is(":checked")
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/diff_match_patch/20121119/diff_match_patch.js" type="text/javascript"> </script>
<script src="https://cdn.rawgit.com/arnab/jQuery.PrettyTextDiff/4b0f134e7209659d2fcc84af3118f554e926d801/jquery.pretty-text-diff.min.js" type="text/javascript"> </script>
<div id="wrapper">
  <h3>
    Demo of jQuery.PrettyTextDiff
  </h3>
  <table class="table table-striped table-bordered table-hover">
    <thead>
      <tr>
        <th>Original</th>
        <th>Changed</th>
        <th>Diff</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="original">This si text 1</td>
        <td class="changed">This is text one</td>
        <td class="diff"></td>
      </tr>
      <tr>
        <td class="original">Today is Jan the 24th, 2013</td>
        <td class="changed">Today is January the 25th of the year 2013</td>
        <td class="diff"></td>
      </tr>
      <tr>
        <td class="original">A mouse is here</td>
        <td class="changed">A sofa is here</td>
        <td class="diff"></td>
      </tr>
    </tbody>
  </table>
  <div>
    <input type='button' class='btn btn-primary' value='Diff' />
</div>

http://jsbin.com/kanami/edit?html

关于javascript - 我无法使用 Google 的库(名为 diff_match_patch)比较两个文本文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35619177/

相关文章:

javascript - stoppropagation 如何与循环一起使用?

jquery 表排序器和文件大小

jQueryUI 可对表行进行排序,在拖动时缩小它们

javascript - 如何取消绑定(bind)正在调用 event.preventDefault() 的监听器(使用 jQuery)?

javascript - 将文本传递到在 JS 函数中打开的弹出窗口

javascript - 如何使用 Bootstrap 调整图像大小

javascript - Rails 远程呈现一个 json 页面并且 JS ajax 处理程序没有捕获

javascript - 如何在函数内部将未定义的 var 转换为对象

PHP 三元运算符

javascript - 如何在 HTML 的数据列表选项中添加删除按钮?