根据java代码改写成js,下边js文件代码:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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 = str.replace(reg, arguments[i]); } this.__strings__.push(str); return this; } StringBuffer.prototype.toString = function () { return this.__strings__.join(''); }; StringBuffer.prototype.clear = function () { this.__strings__ = []; } StringBuffer.prototype.size = function () { return this.__strings__.length; } /* * 传入2个字符串进行相比高亮显示 * 例如 * 原数据一:王五张三 * 原数据二:张三李四 * <span style='color:blue'>王五</span>张三 * 张三<span style='color:blue'>李四</span> * 例如 * 原数据一:1000 * 原数据二:10012 * 100<span style='color:blue'>0</span> * 100<span style='color:blue'>12</span> html里下边调用 <script src="/Scripts/pages/getHighLightDifferent.js"></script> <script> $(document).ready(function () { getHighLightDifferent("王五张三", "张三李四"); getHighLightDifferent("1000", "10012"); }); </script> */ var flag = 1; function getHighLightDifferent(a, b) { //console.log("输入:" + a); //console.log("输入:" + b); var temp = getDiffArray(a, b); var a1 = getHighLight(a, temp[0]); //console.log("输出:" + a1); var a2 = getHighLight(b, temp[1]); //console.log("输出:" + a2); //console.log(flag); 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:blue'>"); result.append(sourceChars[i]); } else if (flag) { result.append(sourceChars[i]); } else { result.append("<span style='color:blue'>"); 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]); } } return result.toString(); } 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); //len = len - 1; //console.log(len); } //console.log(result.join("")); return result; } //将字符串s指定的区域设置成空格 function setEmpty(s, start, end) { var array = s.split(""); for (var i = start; i < end; i++) { array[i] = ' '; } return array.join(""); }
下边html代码:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta charset="utf-8" /> <title>比较两个String字符串找出不同,并将不同处高亮显示</title> <link href="bootstrap.min.css" rel="stylesheet" /> <style type="text/css"> textarea{ border:1; //可根据需要修改有无边框显示长度和宽带 overflow:auto; height:100%; width:100% } input{ border:1; overflow:auto; height:99%; width:96% } </style> <script src="jquery-1.10.2.min.js"></script> <script src="getHighLightDifferent.js"></script> </head> <body> <form> <fieldset> <div class="form-group"> <div class="col-sm-4"> <textarea rows="2" cols="20" type="text" id="inpLeft" name="inpLeft">——我们要坚持开放、绿色、廉洁理念,不搞封闭排他的小圈子,把绿色作为底色,推动绿色基础设施建设、绿色投资、绿色金融,保护好我们赖以生存的共同家园,坚持一切合作都在阳光下运作,共同以零容忍态度打击腐败。我们发起了《廉洁丝绸之路北京倡议》,愿同各方共建风清气正的丝绸之路。</textarea> </div> <div class="col-sm-2"> <input id="inpStartCompare" type="button" value="开始比较" onclick="return startCompare();" /> </div> <div class="col-sm-4"> <textarea rows="2" cols="20" type="text" id="inpRight" name="inpRight">——我们要秉持共商共建共享原则,倡导多边主义,大家的事大家商量着办,推动各方各施所长、各尽所能,通过双边合作、三方合作、多边合作等各种形式,把大家的优势和潜能充分发挥出来,聚沙成塔、积水成渊。</textarea> </div> </div> </fieldset> <br /> <div class="container"> <div id="show1" class="panel panel-primary"></div> <div id="show2" class="panel panel-primary"></div> </div> </form> </body> <script> $(document).ready(function () { //$("#inpStartCompare").click(function () { //return startCompare(); //}); }); function startCompare() { var a = $.trim($("#inpLeft").val()); var b = $.trim($("#inpRight").val()); var result = getHighLightDifferent(a, b); //getHighLightDifferent("1000", "10012"); $("#show1").html(result[0]); $("#show2").html(result[1]); return false; } </script> </html>
测试:
* 传入2个字符串进行相比高亮显示
* 例如
* 原数据一:王五张三
* 原数据二:张三李四
* <span style='color:blue'>王五</span>张三
* 张三<span style='color:blue'>李四</span>
* 例如
* 原数据一:1000
* 原数据二:10012
* 100<span style='color:blue'>0</span>
* 100<span style='color:blue'>12</span>