Javascript 工具/库在浏览器中使用 javascript 检测和显示文本更改，例如 git diff？

Question

对于客户的内联网 HR 部分用户个人资料审批，为了快速跟踪经理批准对用户个人资料的更改，我们希望能够清楚地显示更改的文本。

我很想拥有像 git 的 diff 这样的东西，甚至是在堆栈溢出时使用的编辑引擎。我不确定这是否会发生在客户端，但我想在客户端进行。

我用谷歌搜索了一下，但不幸的是，这些关键词吸引了大量粗鲁的无答案。我想象那里有什么东西……但我既不是Scully，也不是Mulder，时间至关重要。

（上下文：带有数据库数据的基本 LAMP 堆栈。）

例子：

1. 经过多年为竞赛工作的经验后，我加入了我们出色的公司。
   
   
2. 经过多年治疗便秘的经验后，我加入了我们的狡猾公司。

展示：

经过多年治疗便秘的经验后，我加入了我们的狡猾公司。

显然删除线或颜色更好，但这里不可用。

有哪位好心人知道这样的图书馆，或者有什么小发明想要分享吗？

Answer 1

diff 是一个 *nix 工具以及一个 git 工具，因此它是一个很好的关键字来帮助您进行搜索；'javascript diff' 抛出了一些东西，这看起来不错：

https://github.com/kpdecker/jsdiff

他们给出了浏览器内差异的示例：

<pre id="display"></pre>
<script src="diff.js"></script>
<script>
var one = 'beep boop';
var other = 'beep boob blah';

var diff = JsDiff.diffChars(one, other);

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>

它产生的输出看起来就像你所需要的。