☰

Neil Fraser Diff Demo - Enhanced Output View

Easier to compare between corrections, especially for Japanese.

当前为 2016-06-02 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name        Neil Fraser Diff Demo - Enhanced Output View
  3. // @namespace   NFDiff_KK
  4. // @description	Easier to compare between corrections, especially for Japanese.
  5. // @include     https://neil.fraser.name/software/diff_match_patch/svn/trunk/demos/demo_diff.html
  6. // @version     1.2.4
  7. // @grant       none
  8. // ==/UserScript==
  9.  
  10. //Allow selecting text for copying. Source: http://www.javascriptkit.com/javatutors/copytoclipboard.shtml
  11. var script = document.createElement("script");
  12. script.type = "text/javascript";
  13. script.innerHTML = 'function clearComparison(){text1.value = ""; text2.value = "";}; function startSelect(el){var originalText = document.getElementById("original"); var correctedText = document.getElementById("correction"); if (el == 1){selectElementText(originalText);} else {selectElementText(correctedText)}}; function selectElementText(el){var range = document.createRange(); range.selectNodeContents(el); var selection = window.getSelection(); selection.removeAllRanges(); selection.addRange(range);}';
  14. document.head.appendChild(script);
  15.  
  16. //Reset text comparison
  17. text1.value = "";
  18. text2.value = "";
  19. var inputArea = document.getElementsByTagName('tbody');
  20. inputArea[0].innerHTML += '<button type="button" onclick="clearComparison()">Clear Comparison</button>';
  21.  
  22. document.getElementsByTagName('input')[5].addEventListener('click', function() {
  23. 	//Get output
  24. 	var outputdiv = document.getElementById('outputdiv');
  25. 	var output = outputdiv.getElementsByTagName('*');
  26. 	//Sort output
  27. 	var original = '';
  28. 	var correction = '';
  29. 	for (var i = 0; i < output.length; i++){
  30. 		if (output[i].tagName == "SPAN"){
  31. 			original += output[i].outerHTML;
  32. 			correction += output[i].outerHTML;
  33. 		}
  34. 		else if (output[i].tagName == "DEL"){
  35. 			original += output[i].outerHTML;
  36. 		}
  37. 		else if (output[i].tagName == "INS"){
  38. 			correction += output[i].outerHTML;
  39. 		}
  40. 	}
  41. 	//Replace highlight with text color (for better copying into word docs, etc)
  42. 	original = original.replace(/style="background:#ffe6e6;"/igm, 'style="color:red;"');
  43. 	original = original.replace(/¶/igm, '');
  44. 	original = original.replace(/<del/igm, '<span');
  45. 	original = original.replace(/del>/igm, 'span>');
  46. 	correction = correction.replace(/style="background:#e6ffe6;"/igm, 'style="color:green;"');
  47. 	correction = correction.replace(/¶/igm, '');
  48. 	correction = correction.replace(/<ins/igm, '<span');
  49. 	correction = correction.replace(/ins>/igm, 'span>');
  50. 	//Rewrite output
  51. 	outputdiv.innerHTML = '<table border="1" cellspacing="5" cellpadding="5" style="width:100%; border-collapse: collapse;"><tr><td style="width:49.9%; display:inline-table" id="original">' + original + '</td><td style="width:49.9%; display:inline-table" id="correction">' + correction + '</td></tr></table>';
  52. 	outputdiv.innerHTML += '<table border="0" style="width:100%"><tr><td style="width:49.9%"><button type="button" onclick="startSelect(1)">Select All</button></td><td style="width:49.9%"><button type="button" onclick="startSelect(2)">Select All</button></td></tr></table>';
  53. }, false);