js将 textarea 标签的内容通过换行或者回车转换成数组的方法

在web的前端操作中，有时候需要将 html 的 textarea 标签元素中的内容以每行的形式转成一个数组并发向后台，那么该如何做呢？下面这篇博文就来说一说，通过利用 js 将 textarea 标签元素中的内容以换行或回车进行分割并转成数组的方法。

js将 textarea 标签内容转成数组的方法

textarea 中的内容转成数组一般都是以每行内容做为一个元素，而 textarea 元素中的内容都是以 '\r\n' 或 '\n' 进行换行的。我们只要使用 js 中的 split() 方法通过'\r\n' 或 '\n' 字符对内容进行分割即可。

JS代码如下：

复制

script>
    
var textarea = document.getElementById("test_textarea");
    
var str = textarea.value;
    
str_array = new Array();
    
//分割方法1
str_array = str.split(/[(\r\n)\r\n]+/);
    
//分割方法2
//str_array = str.split("\n");
    
console.log(str_array);
    
/script>
    

注意：

1、上面提供了两个分割方法，其结果也是不同的

2、方法1的分割会去掉一行空白行

3、方法2的分割会保留空白行并将转成数组元素

js去掉数组中的空值的元素

js 将 textarea 元素中的内容转成数组时，可能会产生空值的数组元素，为了不影响数据的准确性，我们需要将数组中值为空的元素移除掉。

代码如果：

复制

script>
    
for (i = 0;
     i  str_array.length;
 i++) {

    if (str_array[i] === "") {
    
        str_array.splice(i, 1);
    //去掉值为空的数组
        i = i - 1;
 //删除空之后，后面的元素要向前补位
    }

}
    
/script>
    

JS 将 textarea 标签中的内容通过回车或换行转成数组的完整教程

你可以将下面的html代码保存到本地，进行测试

复制

!DOCTYPE html>
    
html>
    
head>
    
    meta charset="UTF-8">
    
    meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    title>
    Document/title>
    
    textarea id="test_textarea" cols="30" rows="10">
    /textarea>
    
    button onclick="ec()">
    点击运行/button>
    
/head>
    
body>
    
    script>

        function ec(){
    
            var textarea = document.getElementById("test_textarea");
    
            var str = textarea.value;
    
            var str_array = new Array();
    
         // str_array = str.split(/[(\r\n)\r\n]+/);
     //方法1
            str_array = str.split("\n");
     //方法2
            console.log(str_array);
    
            for (i = 0;
     i  str_array.length;
 i++) {

                if (str_array[i] === "") {
    
                    str_array.splice(i, 1);
    //去掉值为空的数组
                    i = i - 1;

                }

            }
    
            console.log(str_array);

        }
    
    /script>
    
/body>
    
/html>
    

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！