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

Question

我想比较两个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.

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

以下是输出此代码的代码：为您安排月亮

// str2 is the text which I want to compare with str1.
var str2 = "I was sent to moon in order to protect you"

function words(s) {
  return s.toLowerCase().match(/\w+/g);
}

// str1 is the reference text. 
var str1 = "I was sent to earth to protect my cousin";

let a = words(str1);
let b = words(str2);
let res1 = b.filter(i => !a.includes(i));
let res2 = a.filter(i => !b.includes(i));
console.log(res1);
console.log(res2);

var str1 = res1.toString();
str1 = str1.replace(/,/g, '\n');

var str2 = res2.toString();
str2 = str2.replace(/,/g, '\n');



document.write(str1); // outputs: moon in order you

首选使用jQuery来更改文本颜色。

Answer 1

您可以在str1中查找尚未建立的str2中的单词。如果将这些单词包装在HTML元素中，则可以为它们提供所需的任何样式。我选择用黑色背景标记这些单词，以使其更加突出，但是您可以应用所需的任何样式。

function words(s) {
    return s.toLowerCase().match(/\w+/g);
}

function addToDOM(sentence) {
  // Create a div, assign the str2 as its inner HTML and add it to
  // the document.
  const div = document.createElement('div');
  div.innerHTML = sentence;
  document.body.appendChild(div);
}

function highlightDifference(source, reference) {
  let a = words(source);
  let b = words(reference);
  let res1 = b.filter(i => !a.includes(i));
  let res2 = a.filter(i => !b.includes(i));

  // Loop over the words in res2 not present in res1.
  res2.forEach(word => {  
    // Replace the word with the word wrapped in an element.
    source = source.replace(word, `<mark>${word}</mark>`);
  });
  
  addToDOM(source);
}

// This works as expected.
// str1 is the reference text. 
var str1 = "I was sent to earth to protect my cousin";
// str2 is the text which I want to compare with str1.
var str2 = "I was sent to moon in order to protect you"

highlightDifference(str1, str2);
highlightDifference(str2, str1);

// This doesn't works as expected.
var world1 = 'Hi, I am Stan';
var world2 = 'Hi, Stan I am';

highlightDifference(world1, world2);
highlightDifference(world2, world1);

mark {
  background-color: black;
  color: white;
}

不幸的是，这种策略会使您在输入以下内容时遇到麻烦：

str1 = 'Hi, I am Stan';
str2 = 'Hi, Stan I am';

它不会突出显示任何单词更改，因为两个句子都包含完全相同的单词，但顺序不同。您将需要一个更明智的策略，如下所示：

// str1 is the reference text. 
var str1 = "Hi, I am Stan";
// str2 is the text which I want to compare with str1.
var str2 = "Hi, Stan I am"

function words(s) {
    return s.match(/\w+/g);
}


function markWords(source, reference) {
  var marked = [];
  // Loop over all the words in source.
  for (let index=0; index<source.length; index++) {
    // Check if reference has fewer words or of the word at the 
    // same index is different from the word in source.
    if (
      reference.length < index ||
      source[index] !== reference[index]
    ) {
      // Words are not equal, mark the word.
      marked.push(`<mark>${source[index]}</mark>`);
    } else {
      // Words are equal, output as is.
      marked.push(source[index]);
    }
  }
  
  // Return the array with (marked) words.
  return marked;
}

function addToDOM(sentence) {
  const div = document.createElement('div');
  div.innerHTML = sentence;
  document.body.appendChild(div);
}

let a = words(str1);
let b = words(str2);

// Mark the words in a which are different in b.
aMarked = markWords(a, b);
addToDOM(aMarked.join(' '));

// Mark the words in b which are different in a.
bMarked = markWords(b, a);
addToDOM(bMarked.join(' '));

mark {
  background-color: black;
  color: white;
}

Answer 2

尝试这样。我引入了一个新功能来突出显示单词。如果匹配，我引入了span标签并添加了一个类。

// str2 is the text which I want to compare with str1.
var str2 = "I was sent to moon in order to protect you"

function words(s) {
    return s.toLowerCase().match(/\w+/g);
}

// str1 is the reference text. 
var str1 = "I was sent to earth to protect my cousin";

let a = words(str1);
let b = words(str2);
let res1 = b.filter(i => !a.includes(i));
let res2 = a.filter(i => !b.includes(i));

highlight(b, "str2", res1);
highlight(a, "str1", res2);
function highlight(str, id, res){
    const div = document.createElement('div');
    var text = "";
   for(var i=0; i<str.length; i++){
    var hasVal = res.includes(str[i]);
    if(hasVal){
      text +=" <span class='imp'>"+str[i]+"</span> ";
    } else {
       text +=" "+str[i]+" ";
    }
   }
    div.innerHTML = text;
    document.body.appendChild(div);
}

.imp{
  color: red
}