React文本域换行被trim()误删问题及保留换行去空格方案

为什么trim()会移除换行？ #

ECMAScript标准里的空白字符不止包含空格（' '），还包括换行符（\n）、回车符（\r）、制表符（\t）等。trim()方法的作用就是移除字符串首尾的所有这类空白字符，所以你输入的换行符会被一并去掉，导致trim().length始终为0。你用的正则/^\s+|\s+$/g里的\s同样匹配所有空白字符，所以效果和trim()一致。

实现仅去除首尾空格、保留换行的方案 #

要只移除首尾的空格字符（' '），需要修改正则表达式，精准匹配开头和结尾的空格，而非所有空白字符。可以使用/^ +| +$/g这个正则：

const [textValue, setTextValue] = useState('')

const onChangeValue = ({target: {value}}) => {
  // 仅移除首尾的空格，保留换行、制表符及中间的空格
  const processedValue = value.replace(/^ +| +$/g, '');
  setTextValue(processedValue);
};

<textarea
     onChange={onChangeValue}
     noAutoResize
     width={'100%'}
     height={'15em'}
     value={textValue}
     maxLength={maxLength}
/>

正则说明：

• ^ +：匹配字符串开头的一个或多个连续空格
• +$：匹配字符串结尾的一个或多个连续空格
• g：全局匹配标识，确保所有符合条件的首尾空格都被替换

这样处理后，文本域里的换行符会被完整保留，只有首尾的空格会被移除，完全符合你的需求。

内容的提问来源于stack exchange，提问作者Andus