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

List / output comma-separated values from single input

本文关键字：分隔 输出 输入 单个      更新时间：2023-09-26

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

示例

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

结果：

  • Steve
  • Bruce
  • 马特
  • 娜塔莎
  • 彼得

只需用逗号分隔输入，并生成列表

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>

希望它能帮助您：

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

使用jQuery

由于您在标记中放入了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>

有几个选项。

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

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

相关文章：