1

我正在尝试使用来自 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>

请帮我解决这个问题。

4

1 回答 1

1

您的代码中存在一些问题，例如多个 jquery 引用、多个漂亮文本差异引用等。

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

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

于 2016-02-25T06:25:58.150 回答