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

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

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

现在我想强调两个字符串的区别。 例如，给出以下两个字符串：

这是第123号

和

这是124号

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

Answer 1

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

 highlight($("#new"), $("#old")); function highlight(newElem, oldElem){ var newText = newElem.text(); var oldText = oldElem.text(); var text = ""; newElem.text().split("").forEach(function(value, index){ if (value != oldText.charAt(index)) text += "" + value + ""; else text += value; }); newElem.html(text); } 

 .highlight { color: red; } 

  
this is number 123
 
that is number 124 

Answer 2

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

然而，出于好奇，我把这个天真的实现放在一起：

CodePen

以下是获得差异的函数：

 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 

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

所以要使用它，我所做的就是：

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

尝试更改CodePen中的文本并观看它更新！

获得这些范围后，它会生成html并插入标记，并将该元素添加到页面中。 如果您知道您的字符串将始终相同，这可能就足够了。 否则，最好查看一个Javascript diff libary！ （ Jsdiff看起来像一个很好的图书馆）

Answer 3

“差异”文本比初看起来更复杂。 这取决于您想要检测每个差异的确切方式，但一般来说，您需要检测：

• 角色等级的变化（123对124）
• 添加文字（’我去过悉尼’与’我从未去过悉尼）。
• 删除文本（与前一示例相反）。

棘手的一点是检测两个字符串之间的差异和共性。 一个天真的实现可能只是逐个字符地比较字符串。 问题是，只要添加或删除一个字符，字符串的其余部分就会显示为差异，即使它实际上与原始文本相同。

您最好的选择是使用现有的差异库。 有很多Javascript。 这个： https ： //github.com/kpdecker/jsdiff看起来不错，虽然它可能对你需要的东西有点过分。 基本上 – 不要试图自己发明这个，除非你想学习很多关于文本解析的知识！

Answer 4

当然前面的答案是正确的，但是如果你有一个非常具体的格式来比较并且不想使用外部框架，那么这样的javascript可以用来对你的角色进行分组并用css对它们进行样式化：