Javascript 突出显示切换开关上的差异

Question

我有兴趣创建一个 javascript 切换功能来高度区分行。

我已经看到一些可以评估文本差异的函数——但我认为它需要遍历每一行——并且在差异上在不同的位周围应用一个跨度标签——然后如果切换被设置回来则删除跨度. Javascript 比较字符串并得到最终差异——但可能有超过 2 个列

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(" "));

这是一个与 npm 不同的演示&mdash;&mdash;http: //jsfiddle.net/8c4nt2e1/1/

Answer 1

使用npmjs.com/package/diff来处理字符差异并使用 HTML 自定义属性（例如）data-diff来找回您的span元素。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>