0

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!

1
  • you can do this by getElementById('first') and two and after that compare it as a string Jun 22, 2012 at 12:54

2 Answers 2

3
text1 = 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);
    }
}
1

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.net/wFMty/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.