最近产品提了个小需求，实现两段长表达式的前后改变对比，而且改动的地方要高亮显示。 于是接到需求 第一件事就是打开百度 一顿操作。哈哈哈
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style type="text/css">
body{
display: flex;
}
#changeafter,#changebefore {
width: 400px;
}
</style>
<body>
<pre id="changebefore"></pre>
<div id="changeafter"></div>
<script src="https://cdn.bootcdn.net/ajax/libs/jsdiff/5.1.0/diff.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var changebefore = "动作名称：未命名 动作执行条件表达式（中）： 动作类型:";
var changeafter = "动作名称：未命名 动作执行条件表达式（中）： 动作类型:动作名称：未命名动作名称：返回信息拉黑卡号2天 动作执行条件表达式（中）：( func.containsC('Charge attempt cannot be fulfilled until 2880 minutes',ERRORMSG)) && transType == '2' 动作类型:1";
document.getElementById('changebefore').innerText = changebefore;
document.getElementById('changeafter').innerHTML = setDiffWord(changebefore,changeafter);
console.log(setDiffWord(changebefore,changeafter))
// 对比文字不同
function setDiffWord(one, other) {
var span = null;
var diff = Diff.diffWords(one, other),
pre = document.createElement('pre');
fragment = document.createDocumentFragment();
diff.forEach((part) => {
var color = "back"
span = document.createElement('span');
if (part.added) {
span.setAttribute('style', 'color:blue;margin-right: 5px;')
} else if (part.removed) {
span.setAttribute('style', 'color:red;text-decoration:line-through;margin-right: 5px;')
}
span.style.color = color;
span.appendChild(document
.createTextNode(part.value));
fragment.appendChild(span);
});
pre.appendChild(fragment);
return pre.innerHTML
}
</script>
</body>
</html>
