js实现数组字符串对比，不同内容进行高亮显示_js两个字符串不同内容比较

前台完成字符串内容对比，我们可以将对比的内容放到一个数组中，方便内容对比；如：

var stringArray = ['Hello, world!', 'Hello, everyone!', 'Goodbye, world!'];

以下方法实现上方数组内容对比，不同的地方高亮显示：

function highlightDifferences(arr) {
  // 获取数组中的第一个字符串作为基准
  var baseString = arr[0];
 
  // 遍历数组中的其他字符串
  for (var i = 1; i < arr.length; i++) {
    var currentString = arr[i];
 
    // 创建一个新的字符串来存储高亮显示的结果
    var highlightedString = '';
 
    // 比较每个字符并将不同的字符用<span>标签高亮显示
    for (var j = 0; j < baseString.length; j++) {
      if (baseString[j] !== currentString[j]) {
        highlightedString += '<span style="background-color: yellow">' + currentString[j] + '</span>';
      } else {
        highlightedString += currentString[j];
      }
    }
 
    // 如果当前字符串比基准字符串长，将剩余的字符用<span>标签高亮显示
    if (currentString.length > baseString.length) {
      for (var k = baseString.length; k < currentString.length; k++) {
        highlightedString += '<span style="background-color: yellow">' + currentString[k] + '</span>';
      }
    }
 
    // 将高亮显示的字符串替换回原始数组
    arr[i] = highlightedString;
  }
  
  // 返回包含高亮显示结果的数组
  return arr;
}

调用该函数：

var highlightedArray = highlightDifferences(stringArray);
 
console.log(highlightedArray);

结果：