js使用正则实现textArea里面一行显示14个字符，支持换行重新计算行数

张滔520

已于 2023-03-20 14:15:40 修改

阅读量285

点赞数

文章标签： javascript 前端 vue.js

于 2023-03-20 14:15:04 首次发布

本文链接：https://blog.csdn.net/weixin_71789561/article/details/129666473

版权

import React, { useState } from "react";
import { Input,Button, message } from "antd";

const { TextArea } = Input;
export default function RegExp() {
  const [value, setValue] = useState("");// vue里面的定义变量
  const onChange = (val: any) => {
    const value = val.target.value;
    const regexp =/[^\n]{14}$/g;
    let newValue = value.replace(regexp, (a1, a2, a3) => {  
      console.log(a1);
      
      return `${a1}\n`;
    })
   
    const type = /[^\n]{15,}/g.test(newValue)
    if (type) {
      newValue = newValue.match(/[^\n]{1,14}/g).join('\n')
      message.info("每行不能超过14")
    }
    console.log('行数', newValue.match(/\n/) && newValue.match(/\n/g).length)// 解决行数需求
    setValue(newValue)
  };

  return (
    <div>
      <TextArea
        placeholder="textarea with clear icon"
        allowClear
        value={value}
        onChange={onChange}
        style={{minHeight:"200px"}}
      />
    </div>
  );
}