逆光之羽
<!DOCTYPE HTML>
<%@page contentType="text/html" pageEncoding="utf-8"%>
<html>
<head>
</head>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("#t1").change(function(){
changeText();
});
$("#t2").change(function(){
changeText();
});
});
//检测文字的不同并改变颜色
function changeText(){
var val1 = $("#t1").val();
var val2 = $("#t2").val();
//如果其中任意一个字符串未输入，不执行对比
if(val1.length == 0 || val2.length == 0){
//清空展示框
$("#str1").html("<font color='red'>比较时必须两个字符串都不为空</font>");
$("#str2").html("");
return;
}
var len = 0;
var subStr = "";
//取较短字符串的长度
if(val1.length <= val2.length){
len = val1.length;
subStr = val2.substring(val1.length-1,val2.length-1); //获取较长字符串多出来的那段文字
}else{
len = val2.length;
subStr = val1.substring(val2.length-1,val1.length-1); //获取较长字符串多出来的那段文字
}
var str1 ="";
var str2 ="";
//对比后获取展示字符串
for(var i=0;i<len;i++){
var char1 = val1.charAt(i);
var char2 = val2.charAt(i);
if(char1 != char2){
char1 = "<font color='red'>"+char1+"</font>";
char2 = "<font color='red'>"+char2+"</font>";
}
str1 += char1;
str2 += char2;
}
//如果截取的文字不为空，添加字体样式
if(subStr != ""){
subStr = "<font color='red'>"+subStr+"</font>";
}
//添加文字提示
str1 = "字符串1："+str1;
str2 = "字符串2："+str2;
//较长的字符串加上被截取的部分
if(val1.length > val2.length){
str1 += subStr;
}else if(val2.length > val1.length){
str2 += subStr;
}
//清空展示框
$("#str1").html("");
$("#str2").html("");
//展示框中添加对比结果
$("#str1").append(str1);
$("#str2").append(str2);
}
</script>
<body>
<div>
输入框1：<input id="t1" type="text"><span style="margin-left:50px;">提示：用的onchange事件,输入两个字符串后随便点击一下空白处就可以触发</span>
<br>
输入框2：<input id="t2" type="text">
</div>
<div>
<div id="str1" style="margin-top:20px;"></div>
<div id="str2"></div>
</div>
</body>
</html>没用原生JS 用jquery写了一个，效果如上图。需要导jquery.min.js包才能使用,也就提供一个实现思路，如果需要JS说一声我改成JS的