在JavaScript中从< textarea>填充数组

Question

在JavaScript中从< textarea>填充数组

3

我该如何从 <textarea> 输入框中的文本填充一个数组?

我的最终目标是将一系列姓名插入到数组中以执行一些操作。这些姓名将通过换行符分隔，就像这样:

bob 
tim 
sally

然后将其添加到数组中。说实话，除了添加<textarea>并创建空数组之外，我不知道从哪里开始。我在阅读其他帖子，但它们使用的是我尚未了解的jQuery或其他语言。我的理解是必须以某种方式拆分内容？

- user2247061

var array = textareaElement.value.split('\n'); - ibrahim mahrir

1

如果您想要删除周围的空格，请使用 map 和 trim。如果您想要删除空字符串，请使用 filter：var array = textareaElement.value.split('\n').map(e => e.trim()).filter(e => e);。 - ibrahim mahrir

4个回答

2

假设您有一个文本区域，在输入每个名称后按回车键。以下是一些开始的方法：

<textarea id="textToArray" style="width:300px; height:120px;"></textarea>
<button onclick="toArray()">To Array</button>
<div id="arrayOutput"><div/>

<script type="text/javascript">
    function toArray( ) {
        var textAreaElement = document.getElementById('textToArray');
        var namesArray = textAreaElement.value.trim().split('\n');
        console.log( namesArray );
        document.getElementById('arrayOutput').innerText = JSON.stringify(namesArray);
    }
</script>

- Jarek Kulikowski

0

如果您的话是这样的

<textarea name="example" id="example" cols="30" rows="10">
    bob 
    tim 
    sally
</textarea>

const textareaContent = document.getElementById('example').value.split('\n');

演示

https://codepen.io/nicholasabrams/pen/weZaOj

- AlphaG33k

OP 希望用换行符\n分隔值，而不是空格。 - kamyl

0

试试这个：

<html>
<body>

<textarea id="textArea"></textarea>

<button onclick="textToArray()">to array</button>

<!--show array result-->
<p id="result"></p>

</body>
</html>
<script>
function textToArray() {
    //assign value of textarea to mytext
    var myText = document.getElementById("textArea").value;

    //split mytext by nextline = "\n" 
    var myArray = myText.split("\n");

    //to check the result
    var result = '';
    for(i=0;i<myArray.length;i++)
    {
        result += myArray[i]+"<br>";
    }

    document.getElementById("result").innerHTML = result;
}
</script>

- Rodren Samillano Gil

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

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

- kamyl · Accepted Answer

很简单：

var textarea = document.querySelector('textarea#names');
var textareaValue = textarea.value; // 'bob\ntim\nsally';
var arr = textareValue.split('\n');

split() 方法可以将字符串按照指定的字符或字符串进行分割并转换成数组。

\n 是表示换行的特殊字符。

编辑：回答下面评论中提出的问题：

var names = [];
var textarea = document.querySelector('textarea#names');

function saveNames() {
    names = textarea.value.split('\n');
}

textarea.addEventListener('blur', saveNames, false);
// or this:
// textarea.addEventListener('keyup', saveNames, false);

你使用事件。你可以使用失焦事件，甚至键盘按键抬起事件。基本上，你监听（事件）某些事情会发生（比如文本区域失去焦点或用户按下键盘按钮），然后做某些事情（读取文本区域的值并将名称保存到数组中）。

这当然是纯js，但如果你想使用jquery，则需要查看jquery参考文献并了解如何使用jquery处理事件。