美文网首页
JS多个字符比较每一位是否相同,不相同的标红

JS多个字符比较每一位是否相同,不相同的标红

作者: 一个小前端程序员 | 来源:发表于2022-06-23 11:05 被阅读0次
/**
 * 三个字符串比对,互相比对,按位比对
 * 核心思路:将字符串的每一位都转为为数组对象,通过数组的下标进行比对
 */
function PrepareStr(){

}

// 将数组中的每一个字符串转化为Object
PrepareStr.prototype.strToObj = function(strArr){
    var arr = [];
    strArr.forEach(str => {
        var newArr = []
        for (var s in str) {
            // 设置字符默认不标红
            newArr.push({
                str: str[s],
                isRed: false,
            });
        }
        arr.push(newArr);
    });
    return arr;
}

// 生成比对方案,两两比对
PrepareStr.prototype.generateTypes = function(strArr){
    var len = strArr.length;
    var arr = [];
    for (let i = 0; i < len - 1; i++) {
        for (let j = i + 1; j < len; j++) {
            arr.push([i,j]);
        }
    }
    return arr;
}

// 比对字符串对象中每一个key是否相同
PrepareStr.prototype.prepare = function(){
    this.prepareTypes.forEach(type => {
        var str1 = this.strObj[type[0]];
        var str2 = this.strObj[type[1]];
        // 以长的作为基准,进行比对
        var str = str1.length > str2.length ? str1 : str2;
        for (const index in str) {
            // 多出的部分直接标红
            if(!str1[index] && str2[index]){
                str2[index].isRed = true;
                continue;
            }
            if(str1[index] && !str2[index]){
                str1[index].isRed = true;
                continue;
            }
            // 不相同的部分也标红
            if(str1[index].str !== str2[index].str){
                str1[index].isRed = true;
                str2[index].isRed = true;
            }
        }
    })
}

// 字符串数组转为普通字符串,并且高亮(标红)显示
PrepareStr.prototype.objToStr = function(obj){
    var arr = [];
    obj.forEach(strArr => {
        var str = "";
        strArr.forEach(strObj => {
            if(strObj.isRed){
                str += "<span style='color:red;'>" + strObj.str + "</span>"
            }else{
                str += strObj.str
            }
        })
        arr.push(str);
    })
    return arr;
}

//不同字符高亮显示
PrepareStr.prototype.getHighlightStr = function(strArr){
    this.strObj = this.strToObj(strArr);
    console.log(this.strObj);
    // 比对方案:两两互相比较
    this.prepareTypes = this.generateTypes(strArr);
    // 根据比对方案比对数据
    this.prepare();
    // 对象转为字符串
    var highlightStrArr = this.objToStr(this.strObj);
    return highlightStrArr;
}



var test = new PrepareStr()
var highlightStrArr = test.getHighlightStr(["000195412675","000195412775","00019675","107194422775"]);
highlightStrArr.forEach(str => {
    $("#text").append("<div>" +str+ "</div>")
})
示例

相关文章

网友评论

      本文标题:JS多个字符比较每一位是否相同,不相同的标红

      本文链接:https://www.haomeiwen.com/subject/jiwpvrtx.html