js比较两个String字符串找出不同，并将不同处高亮显示
生活随笔
收集整理的這篇文章主要介紹了
js比较两个String字符串找出不同，并将不同处高亮显示
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
根據(jù)java代碼改寫(xiě)成js，下邊js文件代碼：
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個(gè)字符串進(jìn)行相比高亮顯示* 例如* 原數(shù)據(jù)一:王五張三* 原數(shù)據(jù)二:張三李四* <span style='color:blue'>王五</span>張三* 張三<span style='color:blue'>李四</span>* 例如* 原數(shù)據(jù)一:1000* 原數(shù)據(jù)二:10012* 100<span style='color:blue'>0</span>* 100<span style='color:blue'>12</span>html里下邊調(diào)用<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();//選取長(zhǎng)度較小的字符串用來(lái)窮舉子串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進(jìn)行比較生成比對(duì)結(jié)果 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) {//遞歸獲取空白區(qū)域左邊差異result = getDiff(result[0], result[1], start, i);}if (i + len < end) {//遞歸獲取空白區(qū)域右邊差異result = getDiff(result[0], result[1], i + len, end);}len = 0;//退出while循環(huán)break;}}len = parseInt(len / 2);//len = len - 1;//console.log(len); }//console.log(result.join(""));return result; }//將字符串s指定的區(qū)域設(shè)置成空格 function setEmpty(s, start, end) {var array = s.split("");for (var i = start; i < end; i++) {array[i] = ' ';}return array.join(""); } View Code下邊html代碼：
<!DOCTYPE html> <html> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta charset="utf-8" /><title>比較兩個(gè)String字符串找出不同，并將不同處高亮顯示</title><link href="bootstrap.min.css" rel="stylesheet" /><style type="text/css"> textarea{border:1; //可根據(jù)需要修改有無(wú)邊框顯示長(zhǎng)度和寬帶 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">——我們要堅(jiān)持開(kāi)放、綠色、廉潔理念，不搞封閉排他的小圈子，把綠色作為底色，推動(dòng)綠色基礎(chǔ)設(shè)施建設(shè)、綠色投資、綠色金融，保護(hù)好我們賴(lài)以生存的共同家園，堅(jiān)持一切合作都在陽(yáng)光下運(yùn)作，共同以零容忍態(tài)度打擊腐敗。我們發(fā)起了《廉潔絲綢之路北京倡議》，愿同各方共建風(fēng)清氣正的絲綢之路。</textarea></div><div class="col-sm-2"><input id="inpStartCompare" type="button" value="開(kāi)始比較" onclick="return startCompare();" /></div><div class="col-sm-4"><textarea rows="2" cols="20" type="text" id="inpRight" name="inpRight">——我們要秉持共商共建共享原則，倡導(dǎo)多邊主義，大家的事大家商量著辦，推動(dòng)各方各施所長(zhǎng)、各盡所能，通過(guò)雙邊合作、三方合作、多邊合作等各種形式，把大家的優(yōu)勢(shì)和潛能充分發(fā)揮出來(lái)，聚沙成塔、積水成淵。</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> View Code?
測(cè)試：
* 傳入2個(gè)字符串進(jìn)行相比高亮顯示
* 例如
* 原數(shù)據(jù)一:王五張三
* 原數(shù)據(jù)二:張三李四
* <span style='color:blue'>王五</span>張三
* 張三<span style='color:blue'>李四</span>
* 例如
* 原數(shù)據(jù)一:1000
* 原數(shù)據(jù)二:10012
* 100<span style='color:blue'>0</span>
* 100<span style='color:blue'>12</span>
轉(zhuǎn)載于:https://www.cnblogs.com/hofmann/p/10775880.html
總結(jié)
以上是生活随笔為你收集整理的js比较两个String字符串找出不同，并将不同处高亮显示的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 11.浅析Java中的final关键字
- 下一篇： 文件对象