⽂本对⽐标红
html
<textarea rows="2" cols="20" type="text" id="inpLeft" name="inpLeft">——我们要坚持开放、绿⾊、廉洁理念，不搞封闭排他的⼩圈⼦，把绿⾊呃呃呃作为</t extarea>
<textarea rows="2" cols="20" type="text" id="inpRight" name="inpRight">——我们要坚持开放、绿⾊、廉洁理念，项⽬压缩⽂件夹/⼯单管理，不搞封闭排他的⼩圈⼦，把绿⾊的的的作为</textarea>
<input id="inpStartCompare" type="button" value="对⽐" ng-click="startCompare();" />
<div id="show1" ></div>
<div id="show2"></div>
js
textarea中cols表示$scope. startCompare=function() {
var a = $.trim($("#inpLeft").val());
var b = $.trim($("#inpRight").val());
var result = getHighLightDifferent(a, b);
$("#show1").html(result[0]);
$("#show2").html(result[1]);
return false;
}
function StringBuffer() {
this.__strings__ = [];
};
StringBuffer.prototype.append = function (str) {
this.__strings__.push(str);
return this;
};
//格式化字符串
StringBuffer.prototype.appendFormat = function (str) {
for (var i = 1; i < arguments.length; i++) {
var parent = "\\{" + (i - 1) + "\\}";
var reg = new RegExp(parent, "g")
str = place(reg, arguments[i]);
}
this.__strings__.push(str);
return this;
}
String = function () {
return this.__strings__.join('');
};
StringBuffer.prototype.clear = function () {
this.__strings__ = [];
}
StringBuffer.prototype.size = function () {
return this.__strings__.length;
}
var flag = 1;
function getHighLightDifferent(a, b) {
var temp = getDiffArray(a, b);//出a和b不⼀样的地⽅
var a1 = getHighLight(a, temp[0]);//将a不⼀样的地⽅⾼亮
var a2 = getHighLight(b, temp[1]);//将b不⼀样的地⽅⾼亮
return new Array(a1,a2);
}
//对⽐出来的不⼀样的地⽅⾼亮
function getHighLight(source, temp) {
var result = new StringBuffer();
var sourceChars = source.split("");
var tempChars = temp.split("");
var flag = false;
for (var i = 0; i < sourceChars.length; i++) {
if (tempChars[i] != ' ') {
if (i == 0) {
result.append("<span style='color:red'>");
result.append(sourceChars[i]);
}
else if (flag) {
result.append(sourceChars[i]);
}
else {
result.append("<span style='color:red'>");
result.append(sourceChars[i]);
}
flag = true;
if (i == sourceChars.length - 1) {
result.append("</span>");
}
}
else if (flag == true) {
result.append("</span>");
result.append(sourceChars[i]);
flag = false;
} else {
result.append(sourceChars[i]);
}
}
String();
}
//出a和b不⼀样的地⽅
function getDiffArray(a, b) {
var result = new Array();
//选取长度较⼩的字符串⽤来穷举⼦串
if (a.length < b.length) {
var start = 0;
var end = a.length;
result = getDiff(a, b, start, end);
} else {
var start = 0;
var end = b.length;
result = getDiff(b, a, 0, b.length);
result = new Array(result[1], result[0]);
}
return result;
}
//将a的指定部分与b进⾏⽐较⽣成⽐对结果
function getDiff(a, b, start, end) {
var result = new Array(a, b);
var len = result[0].length;
while (len > 0) {
for (var i = start; i < end - len + 1; i++) {
var sub = result[0].substring(i, i + len);
var idx = -1;
if ((idx = result[1].indexOf(sub)) != -1) {
result[0] = setEmpty(result[0], i, i + len);
result[1] = setEmpty(result[1], idx, idx + len);
if (i > 0) {
result = getDiff(result[0], result[1], start, i); //递归获取空⽩区域左边差异
}
if (i + len < end) {
result = getDiff(result[0], result[1], i + len, end);//递归获取空⽩区域右边差异 }
len = 0;//退出while循环
break;
}
}
len = parseInt(len / 2);
}
return result;
}
//将字符串s指定的区域设置成空格
function setEmpty(s, start, end) {
var array = s.split("");
for (var i = start; i < end; i++) {
array[i] = ' ';
}
return array.join("");
}
## 效果图
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论