列出/输出单个输入的逗号分隔值

Question

如何在单个输入字段中以逗号分隔的值输出列表（无论是单个值还是数组）？

例

用户在文本输入字段中输入以下内容： Steve，Bruce，Matt，Natasha，Peter

结果：

• 史蒂夫
• 布鲁斯
• 马特
• 娜塔莎（Natasha）
• 彼得

Answer 1

只需将输入拆分为逗号，然后生成列表

 var input = "Steve, Bruce, Matt, Natasha, Peter", ul = $('<ul />'); input.split(',').forEach(function(item) { ul.append( $('<li />', { text : item }) ) }); $('body').append(ul); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

Answer 2

希望它对您有帮助：

var myArray = $('input').val().split(',');

使用jQuery

Answer 3

由于您将jquery放入标签中，所以我想您需要一个jQuery解决方案。

首先，您需要拆分值，然后创建一个列表（ ul或ol ）并添加列表元素（ li ）

 $(function() { $("#valuesForm").submit(function(e) { e.preventDefault(); var values = $("#textfieldId").val().split(","); if (values) { for (var i in values) { var value = values[i].trim(), $valueList = $("#valueList"), $valueItem = $("<li />"); $valueItem.text(value); $valueList.append($valueItem); } } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <form id="valuesForm"> <input type="text" id="textfieldId"> <input type="submit" value="Split!"> </form> <ul id="valueList"> </ul> 

Answer 4

有几种选择。

1分裂

var aux = "Steve, Bruce, Matt, Natasha, Peter";
aux = aux.split(',');

该名称为您提供数组中的名称，但逗号后带有空格。

2去除空白

var aux = "Steve, Bruce, Matt, Natasha, Peter";
aux = aux.split(', ');

这确实会解决逗号后的空白。

3替代

var aux = "Steve, Bruce, Matt, Natasha, Peter";
aux = aux.split(',');

aux = jQuery.map( aux, function( n, i ) {
  return n.trim();
});

这最后一个更加灵活，我在展示它只是为了举例。