Javascript highlight differences on a toggle switch

Question

I am interested in creating a javascript toggle ability to highly the differences in rows. https://www.gsmarena.com/compare.php3?idPhone1=9847&idPhone2=9536#diff-*,*,*

so here is a base sand box. http://jsfiddle.net/5b37w6of/3/

I've seen some functions that could evaluate differences in text -- but I think with this it needs to go over each row - and on the differences apply a span tag around the different bits - then remove the span if the toggle is set back. Javascript compare strings and get end difference -- but there could be more than 2 cols

var s1 = "The quick brown fox",
  s2 = "The quick brown fox jumped over the fence",
  string1 = new Array(),
  string2 = new Array(),
  diff = new Array(),
  longString;

string1 = s1.split(" ");
string2 = s2.split(" ");

if (s1.length > s2.length) {
  longString = string1;
} else {
  longString = string2;
}

for (x = 0; x < longString.length; x++) {
  if (string1[x] != string2[x]) {
    diff.push(string2[x]);
  }
}

document.write("The difference in the strings is " + diff.join(" "));

here is a demo with the differences npm -- http://jsfiddle.net/8c4nt2e1/1/

Not sure what you want to achieve here. To compare strings take a look at https://www.npmjs.com/package/diff. There is an option to compare by characters. — Maxime Gélinas, Oct 23 '20 at 01:30
you have a row of data --- looking at 4 different computers - and so you are looking at specs. You want to flick a toggle switch that will highlight the differences. --- so you need to compare the strings in ALL 4 cols -- wrap the differences with a span -- then if the user toggles the switch again - take off the span -- without destroying markup that was already once there - formatting — The Old County, Oct 23 '20 at 05:38
Use an HTML attribute on your span so you can find it back e.g. `` — Maxime Gélinas, Oct 23 '20 at 11:30

score 2 · Accepted Answer · answered Oct 23 '20 at 17:26

As I said in comments, use npmjs.com/package/diff to handle characters differentiation and use a HTML custom attribute e.g. data-diff to find back your span element.

document.getElementById('show-diff').addEventListener('click', () => {
  const diff = Diff.diffChars(document.getElementById('input-1').value, document.getElementById('input-2').value);
  const output = diff.reduce((result, change) => {
    if (change.added) return result + '<span data-diff="added">' + change.value + '</span>';
    if (change.removed) return result + '<span data-diff="removed">' + change.value + '</span>'
    return result + change.value;
  }, '');

  document.getElementById('output').innerHTML = output;
  console.log(output);
});

document.getElementById('hide-diff').addEventListener('click', () => {
  const output = document.getElementById('output').innerHTML;
  document.getElementById('output').innerHTML = output.replace(/<span data-diff=["'](?:added|removed)["']>(.+)<\/span>/gi, '$1');
});

[data-diff="added"] {
  color: green;
}

[data-diff="removed"] {
  color: red;
}

<script src="https://unpkg.com/diff@4.0.2/dist/diff.min.js"></script>

<div><input id="input-1" value="The quick brown fox" /></div>
<div><input id="input-2" value="The quick brown fox jumped over the fence" /></div>

<button id="show-diff">Show diff</button>
<button id="hide-diff">Hide diff</button>
<div id="output"></div>

handle multiple inputs? but it needs to touch the cols themselves - highlight the differences — The Old County, Oct 23 '20 at 17:41
I'm not doing it for you. I gave you more of what you need to solve your problem. Figure the rest by yourself. — Maxime Gélinas, Oct 23 '20 at 20:47
right - so I am not sure if this is the correct thing to go for then if it can't handle multiple lines - and modify the seen content in the row directly and back again — The Old County, Oct 23 '20 at 21:46
I need this fleshed out to fulfil the bounty - looking for a canonical answer: — The Old County, Oct 24 '20 at 07:38

Javascript highlight differences on a toggle switch

1 Answers1