React Hooks实现输入文本清洗、指定内容提取与数组生成功能咨询

前置排查修正 #

• 调整组件DOM结构：将作为输入框的Container和下方展示用的div设置为平级布局，不要将div嵌套在Input类型的组件内部，避免原生input无嵌套能力导致的渲染异常。
• 增加文本标准化预处理：针对PDF复制内容常带特殊换行、混杂全角/半角空格的问题，先把所有连续空白字符替换为普通空格，避免目标文本因为格式问题匹配失效。

核心清洗逻辑（完全匹配“替换无关文本为空”的实现要求） #

不直接用正则匹配提取目标内容，严格按“先标记要保留的内容、再把其余无关内容全部替换为空值”的路径实现：

1. 定义固定要保留的目标文本常量：const TARGET_TEXT = "Lorem Ipsum"
2. 设置临时占位符，把输入文本里所有出现的目标文本先替换为占位符，避免后续清理时误删有效内容
3. 构造正则规则，把文本里所有非占位符的内容全部替换为空字符串——这一步就是要求的“无关文本替换为空值”的核心操作
4. 将清理后仅存占位符的文本，按占位符拆分后过滤空值，得到最终的有效内容数组，支持后续切片、拼接、按行分割的操作

可直接复用的代码实现 #

import { useState } from 'react';
import styled from 'styled-components';

// 原有封装输入框样式
const Container = styled.input`
  width: 100%;
  padding: 12px;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
`;

const CleanInputTool = () => {
  const [rawInput, setRawInput] = useState("");
  // 存储清洗后的有效内容数组
  const [cleanedList, setCleanedList] = useState([]);

  const handleInputChange = (e) => {
    const inputValue = e.target.value;
    setRawInput(inputValue);

    // 第一步：文本标准化，处理PDF复制的特殊格式
    const normalizedText = inputValue.replaceAll(/\s+/g, " ");
    // 第二步：标记要保留的目标内容
    const TARGET = "Lorem Ipsum";
    const KEEP_FLAG = "__VALID_MARK__";
    const markedText = normalizedText.replaceAll(TARGET, KEEP_FLAG);
    // 第三步：把所有无关文本替换为空值
    const pureText = markedText.replaceAll(new RegExp(`[^${KEEP_FLAG}]`, "g"), "");
    // 第四步：拆分得到有效内容数组
    const validList = pureText.split(KEEP_FLAG).filter(item => item === TARGET);
    setCleanedList(validList);
  };

  // 生成并下载JSON文件
  const exportAsJSON = () => {
    // 可根据需求调整JSON结构，比如按行分割的结构
    const lineBasedData = cleanedList.reduce((res, cur, idx) => {
      const lineNumber = Math.floor(idx / 2) + 1;
      res[`第${lineNumber}行`] = res[`第${lineNumber}行`] || [];
      res[`第${lineNumber}行`].push(cur);
      return res;
    }, {});
    const jsonBlob = new Blob([JSON.stringify(lineBasedData, null, 2)], { type: "application/json" });
    const downloadUrl = URL.createObjectURL(jsonBlob);
    const linkEl = document.createElement('a');
    linkEl.href = downloadUrl;
    linkEl.download = "清洗后内容.json";
    linkEl.click();
    URL.revokeObjectURL(downloadUrl);
  };

  return (
    <div style={{ maxWidth: 600, margin: "24px auto" }}>
      <Container
        type="text"
        placeholder="请粘贴从PDF复制的内容"
        onChange={handleInputChange}
        value={rawInput}
      />
      <div style={{ marginTop: 20 }}>
        <h4>识别到的有效内容：</h4>
        {cleanedList.length ? (
          cleanedList.map((item, idx) => (
            <div key={idx} style={{ padding: "4px 0" }}>{item}</div>
          ))
        ) : (
          <div style={{ color: "#999" }}>暂未识别到匹配内容</div>
        )}
        <button
          onClick={exportAsJSON}
          style={{ marginTop: 16, padding: "8px 16px", cursor: "pointer" }}
        >
          导出JSON文件
        </button>
      </div>
    </div>
  )
}

扩展适配说明 #

• 生成的数组可直接调用slice、concat等数组方法做后续加工，不需要改动核心清洗逻辑
• 调整占位符的拆分规则，就能适配按任意规则分割生成不同结构的JSON文件，不需要重写文本清洗流程

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