Javascript 更改两个字符串之间差异的颜色？

我想比较两个JS字符串变量str1和str2

str1: is the reference text. it doesn't change.

str2: is the text which can be changed to be compared with str1.

到目前为止，我可以跟踪两个字符串之间的差异，但我想将句子本身不同部分的颜色更改为红色，如下所示：

下面是输出以下内容的代码：moon，以便您

//str2是我想与str1比较的文本。
var str2=“我被送到月球是为了保护你”
虚词{
返回s.toLowerCase（）.match（/\w+/g）；
}
//str1是参考文本。
var str1=“我被送到地球是为了保护我的表弟”；
设a=单词（str1）；
设b=单词（str2）；
设res1=b.filter（i=>！a.includes（i））；
设res2=a.filter（i=>！b.includes（i））；
控制台日志（res1）；
console.log（res2）；
var str1=res1.toString（）；
str1=str1。替换（/，/g，“\n”）；
var str2=res2.toString（）；
str2=str2。替换（/，/g，“\n”）；
文件。写入（str1）；//输出：moon按您的顺序

您可以在str2中查找您已经建立的单词，这些单词在str1中不存在。如果您将这些单词包装在HTML元素中，您可以为它们提供任何您想要的样式。我选择用黑色背景来标记这些单词，使它们更加突出，但你可以应用任何你想要的样式

虚词{
返回s.toLowerCase（）.match（/\w+/g）；
}
函数addToDOM（句子）{
//创建一个div，将str2指定为其内部HTML并将其添加到
//文件。
const div=document.createElement（'div'）；
div.innerHTML=句子；
文件.正文.附件（div）；
}
函数highlightDifference（源，参考）{
设a=单词（来源）；
设b=文字（参考）；
设res1=b.filter（i=>！a.includes（i））；
设res2=a.filter（i=>！b.includes（i））；
//将res2中的单词循环到res1中不存在的单词上。
res2.forEach（word=>{
//用包装在元素中的单词替换该单词。
source=source.replace（字，`${word}`）；
});
addToDOM（来源）；
}
//这正如预期的那样有效。
//str1是参考文本。
var str1=“我被送到地球是为了保护我的表弟”；
//str2是我想与str1比较的文本。
var str2=“我被送到月球是为了保护你”
强光差（str1、str2）；
强光差（str2、str1）；
//这不符合预期。
var world1=‘嗨，我是斯坦’；
var world2=‘你好，斯坦，我是’；
highlightDifference（世界1、世界2）；
highlightDifference（世界2、世界1）
标记{
背景色：黑色；
颜色：白色；
}
像这样试试。我引入了一个新函数来突出显示单词。如果匹配，我引入了一个span标记并添加了一个类


//str2是我想与str1比较的文本。
var str2=“我被送到月球是为了保护你”
虚词{
返回s.toLowerCase（）.match（/\w+/g）；
}
//str1是参考文本。
var str1=“我被送到地球是为了保护我的表弟”；
设a=单词（str1）；
设b=单词（str2）；
设res1=b.filter（i=>！a.includes（i））；
设res2=a.filter（i=>！b.includes（i））；
突出显示（b，“str2”，res1）；
突出显示（a，“str1”，res2）；
功能突出显示（str、id、res）{
const div=document.createElement（'div'）；
var text=“”；
对于（var i=0；i）您想要的输出是什么？问题到底是什么？您想要html还是一个更好的函数来实现这一点？亲爱的Aladeen，您的代码太棒了……但是如果我只想要不带div的javascript，并将str2值和颜色变化存储在一个变量中以使用write（）方法？嗨@SaraRee，我已经更新了我的答案，以解决您当前解决方案中的一个问题。嗯…我正在尝试您提供的方法…这是一个聪明的方法…需要更多的时间来做更多的测试。您最后的代码在这里：如果我漏掉一个单词，剩下的部分将被认为是不正确的…这不是我们想要的，是吗？不，我想这不是我们想要的你想要。嗯……没想到。我想你需要更聪明的东西：-）