时间戳

首页 > 解决方案 > Javascript突出显示切换开关上的差异

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

问题描述

我有兴趣创建一个 javascript 切换功能以高度区分行。 https://www.gsmarena.com/compare.php3?idPhone1=9847&idPhone2=9536#diff-*,*,* _

所以这里是一个基础沙盒。 http://jsfiddle.net/5b37w6of/3/

我已经看到了一些可以评估文本差异的函数——但我认为它需要遍历每一行——并且在差异上应用一个跨度标签围绕不同的位——然后如果切换回位则删除跨度. 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 不同的演示——http: //jsfiddle.net/8c4nt2e1/1/

标签： javascript

解决方案

正如我在评论中所说，使用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>

推荐阅读