js textarea换行分隔成数组和数组转换行符textarea回显

最新推荐文章于 2024-06-25 10:31:45 发布

MYG_G

最新推荐文章于 2024-06-25 10:31:45 发布

阅读量3.8k

点赞数 2

分类专栏： antd 文章标签： antd

本文链接：https://blog.csdn.net/qq_40657321/article/details/117996000

版权

antd 专栏收录该内容

23 篇文章 2 订阅

订阅专栏

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

js实现textarea换行分隔成数组

参考文献：https://blog.csdn.net/lxj7607/article/details/105734039/
主要是通过

value.split(/[(\r\n)\r\n]+/)

进行的识别分隔。其中\n代表换行，\r代表回车，可以加个\s代表空格

value.split(/[(\r\n\s)\r\n\s]+/)

1.textarea输入内容

2.处理完的数据

在这里插入图片描述

3.代码

 const handleFinish = async (values: { [name: string]: string }) => {
    console.log(values, 'va----');
    let str_array = values?.entityValueList?.split(/[(\r\n)\r\n]+/);
    str_array.forEach((item, index) => { // 删除空项
      if (item === "") {
        str_array.splice(index, 1);
      }
    })

    console.log(str_array, 'str_array----');
  };

<Form.Item
   label="textarea数据转数组"
    name="valueList"
    initialValue={valueList}
    rules={[
      {
        required: true,
        message: '请输入',
      },
    ]}
  >
   <TextArea
     placeholder="请输入"
     allowClear
     rows={4}
   />
</Form.Item>

js实现数组转换行符textarea回显

1.js数组

2.textarea回显

3.代码

const list = ["1", "22", "33 4455   5532  54看", "90", "老了"];
const valueList = list.join("\n"); //数组转有换行符字符串

<Form.Item
   label="textarea回显"
    name="valueList"
    initialValue={valueList}
    rules={[
      {
        required: true,
        message: '请输入',
      },
    ]}
  >
   <TextArea
     placeholder="请输入"
     allowClear
     rows={4}
   />
</Form.Item>