js实现签订承诺书案例：
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>演示js实现签订承诺书</title>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<style type="text/css">
.ruleContent {
width: 800px;
height: 150px;
border: 1px solid #ccc;
background-color: #ffffff;
font-size: 20px;
white-space: pre-wrap;
}
.divContent {
width: 782px;
height: 156px;
border: 1px solid #ccc;
background-color: #eee;
text-indent: 2rem;
font-size: 20px;
line-height: 30px;
white-space: pre-wrap;
user-select: none;
padding: 5px 10px;
}
.content {
width: 800px;
height: 150px;
border: 1px solid #ccc;
background-color: #ffffff;
text-indent: 2rem;
font-size: 20px;
line-height: 30px;
white-space: pre-wrap;
}
</style>
</head>
<body>
<div>
<div class="ruleContent">签订承诺书要求：
一：模板内容不允许复制粘贴，不允许选中，背景色灰色;
二：只校验文本;
三：错误信息提示;
</div>
<br />
<span>模板内容如下：</span>
<div class="divContent" id="ltcontent1">
疫情就是命令，防控就是责任。坚持做到不信谣，不传谣，不道听途说，不以讹传讹，不散布虚假信息，自觉抵制谣言。以上承诺，我将认真遵守，严格执行，如有违反，愿接受组织给予的任何处理，请组织监督。
</div>
<br />
<textarea class="content" id="ltcontent2" placeholder="请输入以上承诺"></textarea>
<br />
<button onclick="sbmmitLetter()">同意</button>
</div>
<!--js事件-->
<script type="text/javascript">
function sbmmitLetter() {
var content1 = $("#ltcontent1").text();
var content2 = $("#ltcontent2").val();
if (content2 == "") {
alert("请输入以上承诺");
return;
}
var arr1 = [];
var arr2 = [];
// 把两个字符串分别用循环转换为数组
for (var i = 0; i < content1.length; i++) {
var value = content1.charAt(i).trim();
//JavaScript去除字符串中所有的标点符号，只保留中文、英文和数字
value = value.replace(/[`:_.~!@#$%^&*() \+ =<>?"{}|, \/ ;' \\ [ \] ·~！@#￥%……&*（）—— \+ ={}|《》？：“”【】、；‘’，。、]/g,
'');
if (value != "") {
arr1.push(value);
}
}
for (var i = 0; i < content2.length; i++) {
var value = content2.charAt(i).trim();
//JavaScript去除字符串中所有的标点符号，只保留中文、英文和数字
value = value.replace(/[`:_.~!@#$%^&*() \+ =<>?"{}|, \/ ;' \\ [ \] ·~！@#￥%……&*（）—— \+ ={}|《》？：“”【】、；‘’，。、]/g,
'');
if (value != "") {
arr2.push(value);
}
}
//js将数组转换为字符串
var text1=arr1.join("");
var text2=arr2.join("");
//进行比较
var errorMsg=getHighlight(text1,text2);
if(errorMsg!=""){
alert("输入内容有误："+errorMsg);
}else{
alert("输入正确");
//进行业务逻辑，比如进行ajax请求操作
}
}
/**
* 获取高亮文本
*
* @param text1 文本1
* @param text2 文本2
* @param highlightBefore 高亮前缀
* @param highlightAfter 高亮后缀
* @return {result2: string, result1: string} 高亮后的字符串
*/
function getHighlight(text1, text2, highlightBefore, highlightAfter) {
// 初始化高亮文本
highlightBefore = highlightBefore ? highlightBefore : '<span style="color:red;">';
highlightAfter = highlightAfter ? highlightAfter : '</span>';
// 字符数组
var char1s = [];
var char2s = [];
// 偏移量
var char2Index = 0;
// 初始化字符数组对象
for (var i in text1) {
char1s.push({
value: text1[i],
highlight: false
});
}
for (var i in text2) {
char2s.push({
value: text2[i],
highlight: false
});
}
for (var i = 0; i < char1s.length; i++, char2Index++) {
//console.log(i, char2Index);
// 如果文本1结尾有东西
if (char2Index > char2s.length - 1) {
char1s[i].highlight = true;
continue;
}
var char1 = char1s[i].value;
var char2 = char2s[char2Index].value;
//console.log(`char1: ${char1}, char2: ${char2}`);
// 如果字符相等
if (char1 === char2) {
continue;
}
/**
* 初始化比对粒度
*
* 如果连续3个一样的字符，就说明比对成功
* 比对粒度太大，细小的部分可能比对不出来
* 比对粒度太小，重复率高的话容易被比对出来，容易比对错
* 正常调成3就够了，除非重复率特别高的，可以往上调，但建议不超过5
* 最低也不要低于2，不可调成1，否则只要有一个字符一样的，就会被识别出来
*/
var granularity;
if (char1s.length < 10) {
granularity = 2;
} else if (char1s.length < 1000) {
granularity = 3;
} else if (char1s.length < 100000) {
granularity = 4;
} else {
granularity = 5;
}
// 快到结尾时调小比对粒度
if (i > char1s.length - granularity) {
granularity = char1s.length - i;
console.log('修改比对粒度', granularity);
}
// 如果剩余长度小于比对粒度，则不进行比对
if (char1s.length - i < granularity) {
break;
}
// 用来判断是否找到一样的
var end = -1;
// 进行循环比对
// j: 从char2s的哪个索引开始比对
for (var j = char2Index + 1; j < char2s.length - granularity + 1; j++) {
// 比对factor个
var equals = true;
for (var k = j, offset = 0; k < j + granularity; k++, offset++) {
console.log('第' + offset + '次比对', char1s[i + offset].value, char2s[k].value, i + offset, k);
if (char1s[i + offset].value !== char2s[k].value) {
equals = false;
break;
}
}
// 如果相等，结束比对
if (equals) {
end = j;
console.log('比对成功, end=' + end + ', 比对粒度' + granularity);
break;
} else {
console.log('比对失败, 比对粒度' + granularity);
}
}
console.log('比对结束，end=' + end);
// 如果找到了
if (end !== -1) {
for (var k = char2Index; k < end; k++) {
char2s[k].highlight = true;
char2Index++;
console.log('设置高亮', char2s[k]);
}
} else {
// 如果没找到，就让自己高亮
char1s[i].highlight = true;
char2Index--;
console.log('找不到' + char1);
}
}
// 遍历最后多出来的文本2，全部高亮
for (var i = char2Index; i < char2s.length; i++) {
char2s[i].highlight = true;
}
// 将高亮内容提取出来
var errorMsg="";
//输入内容缺少
for(var i=0;i<char1s.length;i++){
if(char1s[i].highlight){
errorMsg+=char1s[i].value;
}
}
//输入内容有缺少，有多余
for(var i=0;i<char2s.length;i++){
if(char2s[i].highlight){
errorMsg+=char2s[i].value;
}
}
return errorMsg;
}
</script>
</body>
</html> 错误效果提示：
备注：
723
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
