##Usage Select a text and set it to left or right. Then press compare to compare left and right.
Note: This example uses localStorage. That means you can use select text and diff in other instances of a window. And it means that example does not work on ancient browsers.
Used library for diffing https://github.com/kpdecker/jsdiff.
| <html> | |
| <head> | |
| <script src="http://kpdecker.github.io/jsdiff/diff.js"></script> | |
| </head> | |
| <body> | |
| <div id="container1" onclick="selectText('container1')"> | |
| <p>Hello, this is a test.<br>Continuing on the next line.</p> | |
| </div> | |
| <div id="container2" onclick="selectText('container2')"> | |
| <p>Hello, this is also a test. That <br/> also continuously continues on the next Line!</p> | |
| </div> | |
| <button onclick="addToStorageLeft()">left</button> | |
| <button onclick="addToStorageRigth()">right</button> | |
| <button onclick="compare()">compare left and right</button> | |
| <hr/> | |
| <h3>Result</h3> | |
| <pre id="result"></pre> | |
| <hr/> | |
| <script type="text/javascript"> | |
| if(typeof(Storage) === "undefined") { | |
| alert("no Storage available"); | |
| } | |
| var addToStorageLeft = function() { | |
| var selected = window.getSelection(); | |
| console.log(selected); | |
| console.log(selected ); | |
| if (selected.toString().length === 0) { | |
| alert('nothing selected'); | |
| } else { | |
| window.localStorage.setItem('left', selected); | |
| } | |
| }; | |
| var addToStorageRigth = function() { | |
| var selected = window.getSelection(); | |
| console.log(selected); | |
| console.log(selected ); | |
| if (selected.toString().length === 0) { | |
| alert('nothing selected'); | |
| } else { | |
| window.localStorage.setItem('right', selected); | |
| } | |
| }; | |
| var compare = function() { | |
| var left = window.localStorage.getItem('left'); | |
| var right = window.localStorage.getItem('right'); | |
| var diff = JsDiff.diffChars(left, right); | |
| var elementById = document.getElementById('result'); | |
| elementById.innerHTML = ''; | |
| diff.forEach(function(part){ | |
| // green for additions, red for deletions | |
| // grey for common parts | |
| var color = part.added ? {background: '#AAFFAA', color: 'black'} : | |
| part.removed ? {background: '#FFCCCC', color: 'black'} : {background: 'white', color: 'black'}; | |
| var span = document.createElement('span'); | |
| span.style.background = color.background; | |
| span.style.color = color.color; | |
| span.appendChild(document.createTextNode(part.value)); | |
| elementById.appendChild(span); | |
| }); | |
| }; | |
| function selectText(containerid) { | |
| if (document.selection) { | |
| var range = document.body.createTextRange(); | |
| range.moveToElementText(document.getElementById(containerid)); | |
| range.select(); | |
| } else if (window.getSelection()) { | |
| var range = document.createRange(); | |
| range.selectNode(document.getElementById(containerid)); | |
| window.getSelection().removeAllRanges(); | |
| window.getSelection().addRange(range); | |
| } | |
| } | |
| </script> | |
| </body> | |
| </html> |