admin管理员组

文章数量:1418717

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!

  • javascript
  • html
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
Add a ment  | 

2 Answers 2

Reset to default 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);
    }
}

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/

本文标签： javascriptGet lines from text area and compareStack Overflow

版权声明：本文标题：javascript - Get lines from text area and compare - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745191783a2646944.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。