Question

我想在页面上有两个下一个框，然后您可以将文本复制/粘贴到它们中，然后使用JavaScript比较这两个框。

<textarea id="first"></textarea>
<textarea id="second"></textarea>

然后使用JavaScript我想逐行比较两者，例如

if [line X of id="first"] != [line X of id="second"]

然后我想突出显示这些行。

我不确定如何逐行访问textarea的值，还是需要获取整个值并将其拆分为数组？

请有人请我提供逐行访问文本区域的语法吗？

此外，如果您认为我错了，或者他们更容易，请告诉我们！

编辑：这是我的完整解决方案：

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'));
        }
    }
};

有点愚蠢，但我正在学习！

Answer 1

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);
    }
}

Answer 2

此代码获取字符串，将其拆分为换行符，并返回位于提供的索引处的字符串：

function line( n, source ) {

    var a = source,
        b = a.split( '\n' );

    return b[ n - 1 ];

}

你可以像这样使用它：

if ( line(5, text) === "whatever" ) {
    // ...
}

您可以在此处查看演示：http://jsfiddle.net/wFMty/

从文本区域获取行并进行比较

2 个答案: