I would like two next boxes on a page, You can then copy/paste text into them and using JavaScript compare the two.
<textarea id="first"></textarea>
<textarea id="second"></textarea>
Using JavaScript I would then like to compare the two, line by line with something simple such as
if [line X of id="first"] != [line X of id="second"]
Then I would like to highlight said lines.
I'm not sure how to access the value of a textarea line by line or would i need to get the whole value and split it into an array?
Would someone please provide me with the syntax to access the text area line by line?
Also if you think I'm going about this wrong or their is a easier way please let me know!
EDIT: Here is my complete solution:
HTML
<!DOCTYPE html>
<html>
<head><script src="split.js?" type="text/javascript"></script>
</head>
<body>
<textarea style="float: left; width: 45%" id="first" name="comments" autocomplete="off" cols="40" rows="5" width="50%"></textarea>
<textarea style="float: right; width: 45%" id="second" name="second" autocomplete="off" cols="40" rows="5"></textarea><br>
<button onClick="compare()">Compare</button>
<br><br><br><br><br><br><br><center><div id="results"></div></center>
</body>
</html>
Javascript
function compare() {
document.getElementById('results').innerHTML = "";
var first = document.getElementById("first");
var second = document.getElementById("second");
if(document.all) { // IE
var f = first.value.split("\r\n");
var s = second.value.split("\r\n");
} else { //Mozilla
var f = first.value.split("\n");
var s = second.value.split("\n");
}
for(var i=0; i<f.length; i++) {
if (f[i] !== s[i]) {
var row = i;
row++
document.getElementById('results').appendChild(document.createTextNode("Box 1 Does not Match Box 2 on line: " + row));
document.getElementById('results').appendChild(document.createElement('br'));
}
}
};
Bit noobish but I'm learning!