jQuery 将文本框值拆分为多行

Question

jQuery 将文本框值拆分为多行

10

我正在创建一个简单的 HTML 页面，其中包含一个文本框。用户向该文本框中输入一些内容，例如：

first last
first last
first last
first last

假设这些是不同的名称。我想要做的是将文本框中的输入提取出来，按照字母顺序去除重复的名称，并在它们周围添加选项标签后显示到屏幕上。

我的现有代码

 <div id="contentdisplay"></div>
<FORM action="" method="">
     <p><LABEL for="content">Paste Code Here: </LABEL></p>
     <p><textarea id="content" cols="80" rows="40"></textarea></p>
    </FORM>



 <script type="text/javascript">
  $(document).ready(function() { 
    $('#content').change(function() {
        var test = $('#content').val();
        $("#contentdisplay").html(test);
    });     
   });
  </script>

目前，当用户点击文本框外部时，它会获取文本框的值并将其显示在“contentdisplay” div中。我卡在了将用户输入拆分成行的部分。我尝试使用test.split('/n')将其放入变量中，但没有成功。

我的想法

在循环时，通过换行符分割表单输入，将每行放入数组中
按字母顺序对数组进行排序。（在此期间删除任何空行或行前后的空格。）
我不确定是否要删除重复项。在Java中，我使用了一个集合，它自动只允许每个条目进入一次。
使用jquery的.html()循环遍历数组以进行显示，并添加标签

想知道是否有人可以启示我关于我的想法以及我如何去做。谢谢！

这是接近最终版本。感谢Erik的帮助。

以下是我为达到我的目的所做的事情。感谢Erik的帮助。

<script type="text/javascript">
function process() {

entered = $('#content').val();
lines = entered.split(/\n/); 
opttext = ""; 


lines = jQuery.unique(lines);
lines.sort();

for(var i in lines) {
  opttext += "<option>" + lines[i] + "</option>";
}

$('#contentdisplay').html("<select>"+opttext+"</select>");
}

$(document).ready(function() {
    $("#content").bind('change', process);
});

</script>

<div id="contentdisplay"></div>

<FORM id="myform" action="" method="">
     <p><LABEL for="content">Paste Code Here and click anywhere on the screen: </LABEL></p>
     <p><textarea id="content" cols="40" rows="10"></textarea></p>
</FORM>

- jim

你能详细说明一下“那没行通”是什么意思吗？.split（我测试过）作为第一步运行得很好。 - Matthew Flaschen

当然，我执行了alert(test.split('/n'))，看起来一切正常，但是如果我执行

var lines = test.split('/n');

$("#contentdisplay").html(lines);

就没有显示任何内容。 - jim

不要将你的正则表达式放在引号中，例如 string.split(/\n/); 注意 / \ n / 周围没有引号。请参见下面的答案。 - Erik

实际上，split函数可以接受字符串或正则表达式作为参数。 - Matthew Flaschen

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Erik · Accepted Answer

试试这个： http://jsbin.com/okigi/3/edit （编辑：将表单标签更改为 div，以便示例不会提交到任何地方）

function process() {

    entered = $('#content').val();
    lines = entered.split(/\n/);
    opttext = ""; for(var i in lines) {
      opttext += "<option>" + lines[i] + "</option>";
    }
    $('#myform').append("<select>"+opttext+"</select>");
}

$(document).ready(function() {
    $("#process").bind('click', process);
});

<FORM id="myform" action="" method="">
     <p><LABEL for="content">Paste Code Here: </LABEL></p>
     <p><textarea id="content" cols="40" rows="10"></textarea></p>
     <button id="process">Go!</button>
</FORM>

这不会去除重复项，也不会按字母顺序排序，但是一旦你将这些行放入数组“lines”中，你可以自己想出如何做这些事情。