ReactJS文本框内容按换行分割为数组的实现方法问询

Hey there! Splitting textarea content into an array by newlines is a common task in React, and there are a few straightforward ways to do it depending on your needs. Here are the most practical approaches:

1. Basic Split (Unix-style newlines) #

If you’re confident your users will be on systems that use \n (most modern OSes), start with a simple split('\n'). You’ll likely want to filter out empty strings (from trailing newlines or blank lines) and optionally trim whitespace from each item:

import { useState } from 'react';

function TextareaSplitter() {
  const [textValue, setTextValue] = useState('');
  const [resultArray, setResultArray] = useState([]);

  const handleChange = (e) => {
    const value = e.target.value;
    setTextValue(value);
    
    // Split by newlines, trim each item, then filter out empty entries
    const splitArray = value.split('\n')
      .map(item => item.trim()) // Remove leading/trailing spaces from each line
      .filter(item => item); // Eliminate empty strings
    
    setResultArray(splitArray);
  };

  return (
    <div>
      <textarea 
        value={textValue} 
        onChange={handleChange} 
        rows={5} 
        placeholder="Enter lines separated by newlines..."
      />
      <h3>Result Array:</h3>
      <pre>{JSON.stringify(resultArray, null, 2)}</pre>
    </div>
  );
}

export default TextareaSplitter;

2. Cross-Platform Line Endings (Handle CRLF and LF) #

Windows uses \r\n (carriage return + line feed) instead of just \n. To support both formats seamlessly, use a regex that matches either line ending:

// Inside handleChange
const splitArray = value.split(/\r?\n/)
  .map(item => item.trim())
  .filter(item => item);

The regex \r?\n translates to "optional carriage return followed by a line feed"—it catches both \n (Unix/macOS) and \r\n (Windows) line endings perfectly.

3. Preserve Empty Lines (If Required) #

If you need to keep blank lines instead of filtering them out, simply skip the filter step:

// With trimming (keeps blank lines as empty strings after trim)
const splitArray = value.split(/\r?\n/).map(item => item.trim());

// Without trimming (preserves all whitespace and empty lines)
const splitArray = value.split(/\r?\n/);

Quick Notes: #

• Trimming: The trim() call is optional—use it only if you want to remove leading/trailing whitespace (spaces, tabs) from each line. Omit it if you need to preserve that formatting.
• Trailing Newlines: If the user adds a newline at the end of the textarea, split will create an empty string at the array’s end. The filter(item => item) step automatically cleans this up.

These methods cover most common use cases for splitting textarea content into an array in React.

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