网站建设资讯

NEWS

网站建设资讯

JQ 实现对比两个文本的差异并高亮显示差异部分

利用jq对比两段文本的差异,差异的内容用不同颜色表示出来。

创新互联公司服务项目包括定结网站建设、定结网站制作、定结网页制作以及定结网络营销策划等。多年来,我们专注于互联网行业,利用自身积累的技术优势、行业经验、深度合作伙伴关系等,向广大中小型企业、政府机构等提供互联网行业的解决方案,定结网站推广取得了明显的社会效益与经济效益。目前,我们服务的客户以成都为中心已经辐射到定结省份的部分城市,未来相信会继续扩大服务区域并继续获得客户的支持与信任!

在线参考demo:
http://incaseofstairs.com/jsdiff/

项目地址:
https://github.com/kpdecker/jsdiff

先上效果图:

左侧第一列是原稿,第二列是需要对比稿,第三列是对比后的结果。

红色文字删除线表示对比稿相对原稿缺少的文字,绿色下划线文字表示对比稿相对原稿新增的文字。

同时支持三种方式:Chars,以字符显示差异;Words,以整句或段显示对比差异;Lines以行显示差异。

html源码:

DOCTYPE html>
<html>
<head>
    <metacharset="utf-8">
    <title>比较文本差异title>
    <styletype="text/css">
        table{ width: 100%; height: 600px; }
        tr{ flex-direction: row; display: -webkit-flex; display: flex; height: 100%; -webkit-flex-wrap: wrap; flex-wrap: wrap; }
            tr td{ width: 33%; border: 1px solid #000000; }
        del{ background: #ff0000; }
        ins{ background: #00ff21; }
    style>
head>
<body>

    <divid="settings">
        <h1>比较文本差异(只适合比较纯文本且不带html标签)h1>
        <label><inputtype="radio" name="diff_type" value="diffChars" checked> Charslabel>
        <label><inputtype="radio" name="diff_type" value="diffWords"> Wordslabel>
        <label><inputtype="radio" name="diff_type" value="diffLines"> Lineslabel>
    div>
    <ahref="https://github.com/kpdecker/jsdiff" class="source">github.com/kpdecker/jsdiffa>
    <table>
        <tr>
            <tdcontenteditable="true" id="a">restauranttd>
            <tdcontenteditable="true" id="b">auratd>
            <td><divid="result">div>td>
        tr>
    table>

    <scriptsrc="/static/index/js/diff.js">script>
    <scriptdefer>
        var a= document.getElementById('a');
var b= document.getElementById('b');
var result= document.getElementById('result');

function changed() {
            console.log('***********************************************');
var oldContent= a.textContent;
var content1= b.textContent;

//console.log("content1-----");
            //console.log(content1);

            //diffChars以字符显示差异
            //diffWords以整句或段显示对比差异
            //diffLines以行显示差异
            //window.diffType
            var diff= JsDiff[window.diffType](oldContent, content1);
var arr= new Array();
for (var i= 0; i< diff.length; i++) {
if (diff[i].added&& diff[i+ 1]&& diff[i+ 1].removed) {
var swap= diff[i];
                    diff[i]= diff[i+ 1];
                    diff[i+ 1]= swap;
                }
                console.log(diff[i]);
var diffObj= diff[i];
var content= diffObj.value;

//可以考虑启用,特别是后台清理HTML标签后的文本
                if (content.indexOf("\n")>= 0) {
//console.log("有换行符");
                    //替换为
var reg= new RegExp('\n','g'); content= content.replace(reg,'
'); } //var reg2 = new RegExp('##em2', 'g'); //var reg3 = new RegExp('replace##', 'g'); //content = content.replace(reg2, ''); //content = content.replace(reg3, ''); if (diffObj.removed) { arr.push('' + content+ ''); }else if (diffObj.added) { arr.push('' + content+ ''); }else { //没有改动的部分 arr.push('' + content+ ''); } } var html= arr.join(''); //var reg = new RegExp('##em2.replace##', 'g'); //html = html.replace(reg, ' '); //$("#" + newId+"_show").html(html); //$("#result").html(html); result.innerHTML= html; } //function changed() { // var diff = JsDiff[window.diffType](a.textContent, b.textContent); // var fragment = document.createDocumentFragment(); // for (var i=0; i < diff.length; i++) { // if (diff[i].added && diff[i + 1] && diff[i + 1].removed) { // var swap = diff[i]; // diff[i] = diff[i + 1]; // diff[i + 1] = swap; // } // var node; // if (diff[i].removed) { // node = document.createElement('del'); // node.appendChild(document.createTextNode(diff[i].value)); // } else if (diff[i].added) { // node = document.createElement('ins'); // node.appendChild(document.createTextNode(diff[i].value)); // } else { // node = document.createTextNode(diff[i].value); // } // fragment.appendChild(node); // } // result.textContent = ''; // result.appendChild(fragment); //} window.onload= function () { onDiffTypeChange(document.querySelector('#settings [name="diff_type"]:checked')); changed(); }; a.onpaste= a.onchange= b.onpaste= b.onchange= changed; if ('oninput' in a) { a.oninput= b.oninput= changed; }else { a.onkeyup= b.onkeyup= changed; } function onDiffTypeChange(radio) { window.diffType= radio.value; document.title= "Diff" + radio.value.slice(4); } var radio= document.getElementsByName('diff_type'); for (var i= 0; i< radio.length; i++) { radio[i].onchange= function (e) { onDiffTypeChange(e.target); changed(); } } script> body> html>

网页标题:JQ 实现对比两个文本的差异并高亮显示差异部分
文章源于:http://cdweb.net/article/dsojjhg.html