I want to pare two JS string variables. str1 and str2.

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

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

So far I can track the differences between two strings but I want to change the color of the different parts to red on the sentence itself like this:

Here is the code that outputs this: moon in order you

// str2 is the text which I want to pare 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

I want to pare two JS string variables. str1 and str2.

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

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

So far I can track the differences between two strings but I want to change the color of the different parts to red on the sentence itself like this:

Here is the code that outputs this: moon in order you

// str2 is the text which I want to pare 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

Using jQuery is preferred to change the text color.

• javascript
• jquery

• What is your desired output? – Kobe Commented May 24, 2019 at 9:50
• whats the question exactly? Do u want html or just a nicer function to do this? – SLuck Commented May 24, 2019 at 9:53

3 Answers 3

Try like this. I have introduced a new function to highlight the word. if it matches I introduced a span tag and added a class.

// str2 is the text which I want to pare 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
}

You can look up the words in str2 which you've already established aren't present in str1. If you wrap these words in an HTML element you can give them any style you want. I've opted to mark the words with a black background to make them stand out more but you can apply whatever styling you want.

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 pare 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;
}

Unfortunately this strategy will get you in trouble for the following input:

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

It will not highlight any words changes as both sentences contain the exact same words but in a different order. You'll need a smarter strategy, something like this:

// str1 is the reference text. 
var str1 = "Hi, I am Stan";
// str2 is the text which I want to pare 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;
}

This is the solution I came up with because I found other solutions that only worked when there was one difference, not multiple

function highlightDifferences(newValue, oldValue) {
    if (oldValue === '' || newValue === oldValue) // Just return if the old value is empty or if the two values match
        return newValue;

    var highlightedCharacter = ""; // returnText will be modifed below
    var oldValueArray = oldValue.split('');
    var newValueArray = newValue.split('');
    var returnArray = [];

    for (var x = 0; x < newValue.split('').length; x++) {
        if (oldValueArray[0] !== undefined && oldValueArray[0] === newValueArray[0]) {
            returnArray.push(newValueArray[0]); // add the un-highlighted character to the return array
            oldValueArray.shift();  // if the two characters are the same, drop them and move to the next character for parison
            newValueArray.shift();  
        }
        else {
            highlightedCharacter = '<span class="highlight">' + newValueArray[0] + '</span>';
            returnArray.push(highlightedCharacter); // add the highlighted character to the return array
            newValueArray.shift(); // remove the unmatched character from the array. oldValueArray is unchanged to pare to the next character in the newValue array
        }
    }

    return returnArray.join('');
}

var oldValue = document.getElementById("oldValue").innerText;
var newValue = document.getElementById("newValue").innerText;

var text = highlightDifferences(newValue,oldValue);
document.getElementById("pared").innerHTML = text;

.highlight {
            background-color: #fdff674d;
            color: red;
        }

<p>Old:</p>
<p id="oldValue">https://somedomain.info/ac834b89e</p>
<p>New:</p>
<p id="newValue">https://55some5domain.i555nfo/ac834b89e</p>
<p>Comparison:</p>
<p id="pared">to be replaced</p>