js比较两个String字符串找出不同，并将不同处高亮显示

根据java代码改写成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个字符串进行相比高亮显示* 例如* 原数据一:王五张三* 原数据二:张三李四* <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("");
}

View Code

下边html代码：

<!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>

View Code

测试：

* 传入2个字符串进行相比高亮显示
* 例如
* 原数据一:王五张三
* 原数据二:张三李四
* 王五张三
* 张三李四

* 例如
* 原数据一:1000
* 原数据二:10012
* 1000
* 10012

转载于:https://www.cnblogs.com/hofmann/p/10775880.html

js比较两个String字符串找出不同，并将不同处高亮显示相关推荐

php找出字符串不同地方,PHP中比较两个字符串找出第一个不同字符位置例子
PHP中比较两个字符串找出第一个不同字符位置例子一般的做法就会这样: 复制代码代码如下: for ($offset = 0; $offset < $length; ++$offset) { ...
程序员面试金典——解题总结： 9.18高难度题 18.5有个内含单词的超大文本文件，给定任意两个单词，找出在这个文件中这两个单词的最短距离
#include <iostream> #include <stdio.h> #include <vector> #include <string> # ...
一千瓶酒有一瓶酒有毒药，问你最少用多少只老鼠可以找出那瓶毒酒？老鼠毒发的时间在两小时内，要求在两个小时内找出毒酒。
题目: 一千瓶酒有一瓶酒有毒药,问你最少用多少只老鼠可以找出那瓶毒酒? 老鼠毒发的时间在两小时内,要求在两个小时内找出毒酒. public class Demo03 { public static v ...
python编写函数、给定任意字符串_编写函数,给定任意字符串,找出其中只出现一次的字符,如果有多个这样的字符,就全部找出。...
[简答题]编写程序,实现分段函数计算,如下表所示. x y x<0 0 0<=x<5 x 5<=x<10 3x-5 10<=x<20 0.5x-2 20< ...
输入两个链表，找出它们的第一个公共结点
package demo;import java.util.HashMap;/** 题目描述输入两个链表,找出它们的第一个公共结点.*/ /* public class ListNode {int ...
两数之和：找出给定数组中和是给定目标整数的两个整数，输出找到的两个整数下标
找出给定数组中和是给定目标整数的两个整数,输出找到的两个整数下标. (本文获得CSDN质量评分[90]) [学习的细节是欢悦的历程] Python 官网:https://www.python.org/ ...
excel中对比两个sheet，找出匹配不上的
问题描述:数据的特点是,在同一个excel文件中存在两个sheet,他们的数据结构是一样的,其中一个中的数据是另一个的子集,目的是要找出他们的不同,即找出在那张大些的sheet中存在,但在那张小些的s ...
两个大文件找出相同的一条记录
#include "stdafx.h" #include <iostream> #pragma warning(disable : 4786)//这句话的位置必须是这里 ...
题目：输入两个链表，找出它们的第一个公共结点。单元测试
链表结点定义如下,这里使用C#语言描述: public class Node{public int key;public Node nextNode;public Node(int key){this ...

js比较两个String字符串找出不同，并将不同处高亮显示

js比较两个String字符串找出不同，并将不同处高亮显示相关推荐

最新文章

热门文章