逐行读取textarea中的文本答案

【问题标题】：Reading text in textarea line by line逐行读取textarea中的文本
【发布时间】：2013-10-17 09:20:42
【问题描述】：

我正在使用 textarea 接受用户输入。并想逐行阅读。但它没有显示任何东西我想在不同的行中制作一个逗号分隔的文本列表

JS：

$('input[type=button]').click( function() {
    string = document.getElementById("hi").val();
    alert(string); 
    var html="";
    var lines = $('#id').val().split('\n');
    for(var i = 0;i < lines.length;i++){
        //code here using lines[i] which will give you each line
        html+=lines[i];
        html+=",";
    }
    $("#inthis").html(string);
});

HTML：

<textarea id="hi" name="Text1" cols="40" rows="5" placeholder="enter one wdg in one line" ></textarea>

<input type="button" value="test" />
<div id="inthis"></div>

这里是 jsfiddle：

http://jsfiddle.net/pUeue/1077/

【问题讨论】：

标签： javascript jquery html textarea

【解决方案1】：

这里是更新的 js...

Demo Fiddle

$('input[type=button]').click(function () {
    var html = "";
    var lines = $('#hi').val().split('\n');
    for (var i = 0; i < lines.length; i++) {
        //code here using lines[i] which will give you each line
        html += lines[i];
        html += ",";
    }
    html = html.substring(0,html.length-1);
    $("#inthis").html(html);
});

【讨论】：

【解决方案2】：

首先，您的示例中混杂了原生 javascript 和 jQuery 代码。例如，原生 DOM 元素没有 val() 方法，那就是 jQuery。其次，您可以通过使用split() 和join(',') 来大大简化您的代码。试试这个：

$('input[type=button]').click( function() {
    var string = $("#hi").val().split('\n').join(',');
    $("#inthis").html(string);
});

Example fiddle

【讨论】：

【解决方案3】：

更改：

string = document.getElementById("hi").val();

到

string = document.getElementById("hi").value;

jsfiddle

【讨论】：

【解决方案4】：

http://jsfiddle.net/pUeue/1085/

$('input[type=button]').click( function() {
    string = $(document.getElementById("hi")).val();
    alert(string); 
    var htmlD="";
    var lines = string.split('\n');
    for(var i = 0;i < lines.length;i++){
    //code here using lines[i] which will give you each line
    htmlD+=lines[i];
    htmlD+=",";
}
    $("#inthis").html(htmlD);
});

【讨论】：

【解决方案5】：

我在这里更正了您的代码：http://jsfiddle.net/pUeue/1080/。

$('input[type=button]').click( function() {
    string = $("#hi").val();
    alert(string); 
    var html="";
    var lines = $('#hi').val().split('\n');
    for(var i = 0;i < lines.length;i++) {
        //code here using lines[i] which will give you each line
        html+=lines[i];
        html+=",";
    }
    $("#inthis").html(html);
});

【讨论】：

【解决方案6】：

试试这个

$('input[type=button]').click( function() {
    var lines =  $('#hi').val().split(/\n/);
    $("#inthis").html(lines.join(","));
});

【讨论】：

【解决方案7】：

第二行有错误，你使用了 jQuery val 而不是 value，所以试试下面：-

string = document.getElementById("hi").value;

并且需要在将字符串加载到 div 之前放入以下行：-

html = html.substring(0,html.length-1);

【讨论】：

【解决方案8】：

.val() 是一个 Jquery 函数，您必须将 DOM 元素转换为 jquery obj 或使用 .value

$('input[type=button]').click(function () {
  string = $(document.getElementById("hi")).val();
  string = string.replace("\n", ",")
  $("#inthis").html(string);
});

http://jsfiddle.net/pUeue/1090/

【讨论】：

谢谢，但是小提琴没有显示逗号分隔的列表。好吧，可能 .split('\n') 没有使用
哦，是的，对于逗号，您可以将 \n 替换为 ',' 而无需使用拆分和连接！我已经更新了答案。