在 jsFiddle 中使用库的文本差异

Question

我想在这个例子中的 jsFiddle/or plunker 中使用文本差异，目前这不起作用，我做错了什么？

这是我需要使用的库 https://github.com/kpdecker/jsdiff

我需要以下 webExample

https://github.com/kpdecker/jsdiff/blob/master/examples/web_example.html

这是我尝试过的，但没有成功。

<pre id="display"></pre>
<script src="github.com/kpdecker/jsdiff"></script>
<script>
var one = 'beep boop';
var other = 'beep boob blah';

var diff = JsDiff.diffChars(one, other);
var display = document.getElementById('display');

diff.forEach(function(part){
  // green for additions, red for deletions
  // grey for common parts
  var color = part.added ? 'green' :
    part.removed ? 'red' : 'grey';
  var span = document.createElement('span');
  span.style.color = color;
  span.appendChild(document
    .createTextNode(part.value));
  display.appendChild(span);
});
</script>

Answer 1

查看不可或缺的浏览器控制台（通常是F12），出现以下错误：

NetworkError: 404 NOT FOUND - https://fiddle.jshell.net/bvwbawLL/show/github.com/kpdecker/jsdiff

ReferenceError: JsDiff is not defined
   var diff = JsDiff.diffChars(one, other);

这是由于：

<script src="github.com/kpdecker/jsdiff"></script>

有 2 个问题：

它缺少 URL 的协议部分：https:// 在这种情况下。将其排除在外会使它成为相对于页面的 link。
link 指向项目页面，而不是 JavaScript 文件。

现在，经过一番搜索，我在 http://kpdecker.github.io/jsdiff/ 页面上找到了 diff.js 的在线版本（使用 F12 查找脚本）。

但是，这未列为要使用的资源。我还没有找到 CDN hosting it either. So, for a little fiddle you could use that file - but it may disappear without notice! For a production site, you better download a release 并自己托管脚本文件。

在 jsFiddle 中使用库的文本差异

Text diff using library in jsFiddle

javascript

diff

jquery