Home/ Questions/Q 8118491
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-06T04:30:13+00:00

I would like two next boxes on a page, You can then copy/paste text

  • 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!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team
    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);
    }
}
    • 0