内容差异比较diff_match_patch.js

有知识的山巅

已于 2024-01-02 15:36:35 修改

阅读量733

点赞数 12

分类专栏： java进阶综合提升文章标签：前端 html javascript

于 2023-12-31 14:52:25 首次发布

本文链接：https://blog.csdn.net/qq_37792401/article/details/135316005

版权

java进阶综合提升专栏收录该内容

6 篇文章

订阅专栏

本文介绍了如何使用JavaScript库diff_match_patch.js来演示文本差异比较功能，展示了如何将差异转换为高亮显示的HTML。通过实例展示了比较两个相同但有部分修改的文本内容的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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