非常好用的jquery 文本对比插件

演示  website 下载

插件介绍

一个易于使用的jQuery文本对比插件，用于比较两个文本文档之间的不同之处，差异高亮显示。

兼容的浏览器

Chrome, IE9+, FireFox, Opera, Safari

使用说明

1. 创建两个textarea元素，在其中插入要比较的文本。

<textarea required id="refSentence">
 帝国模板 之家
</textarea>

<textarea required id="mySentence">
 帝国之家 模板
</textarea>

2. 创建一个按钮来查找文本之间的差异。

<button type="button" id="submit" onclick="buttonClick()">
  查找不同之处
</button>

3. 创建一个输出容器来保存结果。

<code id="output"></code>

4. 在html页面底部加载jQuery库和文本对比插件文件。

<script src="jquery.min.js"></script>
<script src="app.js"></script>

5. 文本对比css样式代码。

.new {
  color: green;
}

.del {
  text-decoration: line-through;
  color: red;
}

.shifted {
  color: darkblue;
}

.normal {
  color: gray;
}