内容差异比较diff_match_patch.js

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 difftitle>
  <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 += `${part[1]}`;
		    } else if (part[0] === -1) { // 表示删除,对应于DIFF_DELETE
		      result += `${part[1]}`;
		    } 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>

只有干货
关注+点赞助你增知识涨薪

你可能感兴趣的:(java进阶综合提升,前端,html,javascript)