-
Notifications
You must be signed in to change notification settings - Fork 285
/
diff.html
135 lines (102 loc) · 5.6 KB
/
diff.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> - 文本对比</title>
<meta name="keywords" content="">
<meta name="description" content="">
<link rel="shortcut icon" href="favicon.ico"> <link href="css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
<link href="css/font-awesome.css?v=4.4.0" rel="stylesheet">
<link href="css/animate.css" rel="stylesheet">
<link href="css/style.css?v=4.1.0" rel="stylesheet">
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
<div class="row">
<div class="col-sm-12">
<div class="ibox ">
<div class="ibox-title">
<h5>文本对比插件</h5>
</div>
<div class="ibox-content">
<strong>jQuery.PrettyTextDiff</strong>
<p>
包含在Google的diff_match_patch库中
<br/>
您可以通过为要比对的文本添加<code>.original</code>和<code>.changed</code>来比对两段文字的差别。
</p>
<div class="well">
<h3 class="m-t-lg">标准示例</h3>
<div class="row diff-wrapper">
<div class="col-md-4">
<h4>原文本</h4>
<div class="original">要对文本文件的进行比较的时候，可以考虑使用google-diff-match-patch，它可以进行比较、匹配和生成补丁的操作，这里将展示一个简单文本比较的例子。</div>
</div>
<div class="col-md-4">
<h4>修改过的文本</h4>
<div class="changed">要对文本进行比较的时候，可以考虑使用 google-diff-match-patch，它可以进行比较、匹配和生成补丁的操作，我们在这里展示一个简单的例子。首先我们必须接定好文本比较后的输出。假设我们有两段文本“123456789”和“012356889”，然后我们希望输出他们的“差异”，可是这个“差异”怎么表示呢？</div>
</div>
<div class="col-md-4">
<h4>对比结果：</h4>
<div class="diff1"></div>
</div>
</div>
</div>
<h3 class="m-t-lg">作为函数参数</h3>
<p>
当文本域的文本发生变化时，自动实时输出结果。
</p>
<div class="row diff-wrapper2">
<div class="col-md-4">
<h4>原文本</h4>
<textarea class="form-control diff-textarea" id="original" rows="6">
百度新闻是包含海量资讯的新闻服务平台,真实反映每时每刻的新闻热点。您可以搜索新闻事件、人物动态、产品资讯等,快速了解它们的最新进展。
</textarea>
</div>
<div class="col-md-4">
<h4>对比结果：</h4>
<div class="diff2"></div>
</div>
<div class="col-md-4">
<h4>新文本</h4>
<textarea class="form-control diff-textarea" id="changed" rows="6">
“百度新闻”是包含海量资讯的新闻服务性质的新闻平台，真实反映新闻热点。您可以搜索新闻事件、热点话题、人物动态、资讯等，快速了解它们的最新进展。
</textarea>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 全局js -->
<script src="js/jquery.min.js?v=2.1.4"></script>
<script src="js/bootstrap.min.js?v=3.3.6"></script>
<!-- 自定义js -->
<script src="js/content.js?v=1.0.0"></script>
<!-- Diff march patch -->
<script src="js/plugins/diff_match_patch/diff_match_patch.js"></script>
<!-- jQuery pretty text diff -->
<script src="js/plugins/preetyTextDiff/jquery.pretty-text-diff.min.js"></script>
<script>
$(document).ready(function () {
$(".diff-wrapper").prettyTextDiff({
diffContainer: ".diff1"
});
$(".diff-wrapper2").prettyTextDiff({
originalContent: $('#original').val(),
changedContent: $('#changed').val(),
diffContainer: ".diff2"
});
$(".diff-textarea").on('change keyup', function() {
$(".diff-wrapper2").prettyTextDiff({
originalContent: $('#original').val(),
changedContent: $('#changed').val(),
diffContainer: ".diff2"
});
});
});
</script>
</body>
</html>