I would like two next boxes on a page, You can then copy/paste text into them and using JavaScript pare the two.
<textarea id="first"></textarea>
<textarea id="second"></textarea>
Using JavaScript I would then like to pare 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 plete 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="ments" autoplete="off" cols="40" rows="5" width="50%"></textarea>
<textarea style="float: right; width: 45%" id="second" name="second" autoplete="off" cols="40" rows="5"></textarea><br>
<button onClick="pare()">Compare</button>
<br><br><br><br><br><br><br><center><div id="results"></div></center>
</body>
</html>
Javascript
function pare() {
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!
I would like two next boxes on a page, You can then copy/paste text into them and using JavaScript pare the two.
<textarea id="first"></textarea>
<textarea id="second"></textarea>
Using JavaScript I would then like to pare 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 plete 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="ments" autoplete="off" cols="40" rows="5" width="50%"></textarea>
<textarea style="float: right; width: 45%" id="second" name="second" autoplete="off" cols="40" rows="5"></textarea><br>
<button onClick="pare()">Compare</button>
<br><br><br><br><br><br><br><center><div id="results"></div></center>
</body>
</html>
Javascript
function pare() {
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!
Share Improve this question edited Jan 13, 2015 at 14:59 user2759013 5011 gold badge10 silver badges20 bronze badges asked Jun 22, 2012 at 12:51 Mark PriceMark Price 6001 gold badge8 silver badges19 bronze badges 1- you can do this by getElementById('first') and two and after that pare it as a string – NullPoiиteя Commented Jun 22, 2012 at 12:54
2 Answers
Reset to default 3text1 = document.getElementById("first").value.split("\n");
text2 = document.getElementById("second").value.split("\n");
var limit = text1.length > text2.length ? text1.length : text2.length;
for(i=0;i<limit ; i++)
{
if(text1[i] == text2[i])
{
alert(true);
}
else
{
alert(false);
}
}
This code takes the string, splits it at a line break, and returns the string located at the index provided:
function line( n, source ) {
var a = source,
b = a.split( '\n' );
return b[ n - 1 ];
}
You can use it like this:
if ( line(5, text) === "whatever" ) {
// ...
}
You can see a demo here: http://jsfiddle/wFMty/