用javascript比较屏幕上的2条记录

我正在寻找一种方法来比较屏幕上的2条json记录。我想要的方式是，我想要并排显示这两条记录，并标记匹配或不匹配的属性

有没有一个图书馆已经这样做了，如果没有，我怎么做

编辑

---

我的目标是识别相同/不同的属性&向具有不同样式的用户显示它们，而不是将对象作为一个整体进行比较。

有人为此制作了jQuery插件-jQuery.PrettyTextDiff

---

这里有一个快速的JavaScript函数，可以帮助您将字符串与

JSON

字符串进行比较

首先，它检查它们是否具有相同数量的属性，然后比较它们是否具有相同的属性（按名称），然后比较值

您可能需要调整值比较（以允许

未定义

或

空

）

希望这对你来说是一个很好的开始

<script type="text/javascript">
    var so = {}; // stackoverflow, of course.
    so.compare = function (left, right) {

        // parse JSON to JavaScript objects
        var leftObj = JSON.parse(left);
        var rightObj = JSON.parse(right);

        // add object properties to separate arrays. 
        var leftProps = [];
        var rightProps = [];
        for(var p in leftObj) { leftProps.push(p); }
        for(var p in rightObj) { rightProps.push(p); }

        // do they have the same number of properties
        if (leftProps.length != rightProps.length) return false;

        // is every right property found on the left
        for (var r = 0; r < rightProps.length; r++) {
            var prop = rightProps[r];
            if (leftProps.indexOf(prop) < 0) {
                return false;
            }
        }
        // is every left property found on the right
        for (var r = 0; r < leftProps.length; r++) {
            var prop = leftProps[r];
            if (rightProps.indexOf(prop) < 0) {
                return false;
            }
        }

        // do the values match?
        for (var q = 0; q < leftProps.length; q++) {
            var propname = leftProps[q];
            var leftVal = leftObj[propname];
            var rightVal = rightObj[propname];
            if (leftVal != rightVal) {
                return false;
            }
        }

        return true;
    }
</script>

var so={}；//当然是溢出。
so.compare=函数（左、右）{
//将JSON解析为JavaScript对象
var leftObj=JSON.parse（左）；
var rightObj=JSON.parse（右）；
//将对象属性添加到单独的数组中。
var leftProps=[]；
var rightProps=[]；
对于（leftObj中的var p）{leftProps.push（p）；}
对于（rightObj中的var p）{rightProps.push（p）；}
//他们有相同数量的财产吗
if（leftProps.length！=rightProps.length）返回false；
//每一个正确的财产都在左边吗
for（var r=0；r

可能重复的是同意这是重复的问题感谢@kaz的回答。是否可以在“原始”和“更改”列上使用颜色，而不是差异部分？如果文本不同，我可以将所有文本更改为红色，而不是显示差异？如果所有的颜色都一样的话，那么把ir涂成绿色？

<script type="text/javascript">
    var so = {}; // stackoverflow, of course.
    so.compare = function (left, right) {

        // parse JSON to JavaScript objects
        var leftObj = JSON.parse(left);
        var rightObj = JSON.parse(right);

        // add object properties to separate arrays. 
        var leftProps = [];
        var rightProps = [];
        for(var p in leftObj) { leftProps.push(p); }
        for(var p in rightObj) { rightProps.push(p); }

        // do they have the same number of properties
        if (leftProps.length != rightProps.length) return false;

        // is every right property found on the left
        for (var r = 0; r < rightProps.length; r++) {
            var prop = rightProps[r];
            if (leftProps.indexOf(prop) < 0) {
                return false;
            }
        }
        // is every left property found on the right
        for (var r = 0; r < leftProps.length; r++) {
            var prop = leftProps[r];
            if (rightProps.indexOf(prop) < 0) {
                return false;
            }
        }

        // do the values match?
        for (var q = 0; q < leftProps.length; q++) {
            var propname = leftProps[q];
            var leftVal = leftObj[propname];
            var rightVal = rightObj[propname];
            if (leftVal != rightVal) {
                return false;
            }
        }

        return true;
    }
</script>