Next.js/React自定义文本转HTML解析组件是否已有现成方案？

针对你这种带特定规则的文本解析需求，市面上几乎没有完全匹配的现成工具——毕竟你的标记规则（#title/#content分隔、\b/\i格式标记）是自定义的，直接写个轻量解析函数反而更灵活适配，下面给你具体实现思路和代码：

一、核心解析函数实现 #

先写一个纯函数处理文本解析，输出你需要的title和content结构：

// utils/parseText.js
export function parseText(rawText) {
  // 提取标题：匹配#title到#content之间的内容
  const titleMatch = rawText.match(/#title\s*(.*?)\s*#content/s);
  const title = titleMatch ? titleMatch[1].trim() : '';
  
  // 提取内容：匹配#content之后的所有内容
  const contentMatch = rawText.match(/#content\s*(.*)/s);
  let content = contentMatch ? contentMatch[1] : '';

  // 替换加粗标记
  content = content.replace(/\\b(.*?)\\b/g, '<strong>$1</strong>');
  // 替换斜体标记
  content = content.replace(/\\i(.*?)\\i/g, '<em>$1</em>');
  // 自动处理换行
  content = content.replace(/\n/g, '<br/>');

  return { title, content };
}

二、React/Next.js组件中调用 #

在页面或组件里直接调用解析函数，拿到结果后渲染：

// pages/ParsePage.jsx
import { parseText } from '../utils/parseText';

export default function ParsePage() {
  // 示例：这里可以替换为读取本地txt文件或用户上传的文件内容
  const rawTxtContent = `#title
产品介绍
#content
这是一款\b高性能\b的工具，\i支持多种自定义规则\i。
无需手动添加换行标签，解析时自动识别换行。`;

  const parsing = parseText(rawTxtContent);

  return (
    <div className="container">
      <h2>{parsing.title}</h2>
      {/* 用dangerouslySetInnerHTML渲染解析后的HTML内容 */}
      <div 
        className="content"
        dangerouslySetInnerHTML={{ __html: parsing.content }} 
      />
    </div>
  );
}

额外注意事项 #

• 文件读取方式：如果是服务端读取本地txt文件，Next.js中可以用fs.readFileSync；如果是客户端上传文件，需要用FileReader API读取文件内容后传入解析函数。
• 安全问题：使用dangerouslySetInnerHTML时，要确保输入文本是可信的（比如自己的静态文件）。如果处理用户上传的未知内容，建议用dompurify库过滤XSS风险后再渲染。

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