如何用css突出两个文本的区别？

Question

我知道如何使用此脚本使用CSS突出显示文本的一部分:

span.highlight {
    background-color: #B4D5FF;
}

现在我想强调两个字符串的区别.例如,给出以下两个字符串:

这是第123号

和

这是124号

我需要像我在这里展示的那样突出显示文本.有人可以帮助我实现这个目标吗？

span.highlight {background-color: #B4D5FF}

<p>this is number 123</p>
<p>
th<span class="highlight">at</span> is number 12<span class="highlight">4</span>
</p>

Answer 1

您需要使用split()方法获取新字符串的所有字符并迭代每个字符并将其与旧字符串的字符进行比较.

highlight($("#new"), $("#old"));

function highlight(newElem, oldElem){ 
  var oldText = oldElem.text(),     
      text = '';
  newElem.text().split('').forEach(function(val, i){
    if (val != oldText.charAt(i))
      text += "<span class='highlight'>"+val+"</span>";  
    else
      text += val;            
  });
  newElem.html(text); 
}

.highlight {background-color: #B4D5FF}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="old">this is number 123</p>
<p id="new">that is number 124</p>

您也可以使用更简单的代码,如下图所示

highlight($("#new"), $("#old"));

function highlight(newElem, oldElem){ 
  newElem.html(newElem.text().split('').map(function(val, i){
    return val != oldElem.text().charAt(i) ?
      "<span class='highlight'>"+val+"</span>" : 
      val;            
  }).join('')); 
}

.highlight {background-color: #B4D5FF}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="old">this is number 123</p>
<p id="new">that is number 124</p>

如果你想使用更少的跨度检查底部代码

highlight($("#new"), $("#old"));

function highlight(newElem, oldElem){ 
  var oldText = oldElem.text(),     
      text = '',
      spanOpen = false;  
  newElem.text().split('').forEach(function(val, i){  
    if (val != oldText.charAt(i)){   
      text += !spanOpen ? "<span class='highlight'>" : "";
      spanOpen = true;
    } else {       
      text += spanOpen ? "</span>" : "";
      spanOpen = false;  
    }  
    text += val;
  });
  newElem.html(text); 
}

.highlight {background-color: #B4D5FF}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="old">this is number 123</p>
<p id="new">that is number 124</p>

Answer 2

因此，您必须使用 Javascript 来完成此操作，因为它涉及相当多的逻辑。正如其他答案中提到的，检测文本中的差异比仅逐个字符检查要复杂一些。

然而，出于好奇，我将这个简单的实现放在一起：

代码笔

获取差异的函数如下所示：

function getDiff(text1,text2){
  //Takes in two strings 
  //Returns an array of the span of the differences 
  //So if given:
  // text1: "that is number 124"
  // text2: "this is number 123"
  //It will return:
  // [[2,4],[17,18]]
  //If the strings are of different lengths, it will check up to the end of text1 
  //If you want it to do case-insensitive difference, just convert the texts to lowercase before passing them in 
  var diffRange = []
  var currentRange = undefined
  for(var i=0;i<text1.length;i++){
    if(text1[i] != text2[i]){
      //Found a diff! 
      if(currentRange == undefined){
        //Start a new range 
        currentRange = [i]
      }
    }
    if(currentRange != undefined && text1[i] == text2[i]){
      //End of range! 
      currentRange.push(i)
      diffRange.push(currentRange)
      currentRange = undefined
    }
  }
  //Push any last range if there's still one at the end 
  if(currentRange != undefined){
    currentRange.push(i)
    diffRange.push(currentRange)
  }
  return diffRange;
}

该函数getDiff接受两个字符串，并返回它们不同的范围。只要两个字符串的长度相同，这种方法就很有效。

因此，要使用它，我要做的就是：

var text1 = "that is number 124"
var text2 = "this is number 123"
var diffRange = getDiff(text1,text2)

尝试更改 CodePen 中的文本并观察其更新！

一旦获得这些范围，它就会生成 html 并插入标签<span>，并将元素添加到页面。如果您知道您的字符串将始终相同，那么这就足够了。否则，最好查看 Javascript diff 库！（Jsdiff似乎是一个不错的库）