<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
//在CSS文件中定义颜色样式
.inserted {
background-color: lightgreen;
}
.deleted {
background-color: lightcoral;
}
</style>
<title>diff, match and patch: demo of diff</title>
<script type="text/javascript" language="javascript" src="../javascript/diff_match_patch.js"></script>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
function convertDiffToHighlightedHtml(diffs) {
let result = '';
diffs.forEach(part => {
if (part[0] === 1) { // 表示插入,对应于DIFF_INSERT
result += `<span class="inserted">${part[1]}</span>`;
} else if (part[0] === -1) { // 表示删除,对应于DIFF_DELETE
result += `<span class="deleted">${part[1]}</span>`;
} else { // 0,表示无变化,对应于DIFF_EQUAL
result += part[1];
}
});
return result;
}
$(document).ready(function() {
var dmp = new diff_match_patch();
const text1 = "只能比较文本差异";
const text2 = "只能比较文本差异";
var d = dmp.diff_main(text1, text2);
dmp.diff_cleanupSemantic(d);
let highlightedHtml = convertDiffToHighlightedHtml(d);
console.log(highlightedHtml);
$('body').html(highlightedHtml);
});
</script>
</head>
<body>
</body>
</html>
只有干货
关注+点赞助你增知识涨薪