javascript将 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>

本文 javascript将 textarea 标签的内容通过换行或者回车转换成数组的方法到此结束。首先细心思考,然后果断决定,最后坚忍不拔地去做。小编再次感谢大家对我们的支持!

您可能有感兴趣的文章
jquery ajax实现文件上传功能实例代码

SpringMVC+Jquery实现Ajax功能

关于二次封装jquery ajax办法示例详解

ajax实现用户名校验的传统和jquery的$.post方式(实例讲解)

jQuery Ajax的readyState和status的区别和使用详解