React中多段*/_包裹文本无法正确转为粗体/斜体的问题

你的代码仅能处理第一段*包裹的文本，核心问题是正则替换未启用全局匹配，或者替换逻辑仅执行了单次匹配操作。以下是两种可行的修正方案：

方案一：使用正则全局替换（需注意XSS风险） #

通过添加正则的g标志，实现全局匹配所有*和_包裹的片段，再将其替换为对应HTML标签：

const formatText = (text) => {
  // 全局匹配*包裹的内容，替换为粗体标签
  let formattedText = text.replace(/\*(.*?)\*/g, '<b>$1</b>');
  // 全局匹配_包裹的内容，替换为斜体标签
  formattedText = formattedText.replace(/_(.*?)_/g, '<i>$1</i>');
  return formattedText;
};

// 组件内使用
function TextDisplay({ content }) {
  return (
    <div dangerouslySetInnerHTML={{ __html: formatText(content) }} />
  );
}

// 调用示例
<TextDisplay content="*第一段粗体* 普通文本 *第二段粗体*，还有_斜体内容_" />

说明：

• 正则中的.*?是非贪婪匹配，避免多个标记时出现过度匹配（比如*a*b*会被拆分为两个独立粗体片段）
• dangerouslySetInnerHTML存在XSS风险，仅适用于内容可信的场景

方案二：安全拆分渲染（无XSS风险） #

将文本拆分为普通文本和格式化片段的数组，直接渲染为React元素，无需使用危险的HTML插入：

const parseFormattedText = (text) => {
  // 按*或_包裹的片段拆分文本，保留分隔符
  const textParts = text.split(/(\*.*?\*|_.*?_)/);
  
  return textParts.map((part, idx) => {
    // 处理粗体片段
    if (part.startsWith('*') && part.endsWith('*')) {
      return <b key={idx}>{part.slice(1, -1)}</b>;
    }
    // 处理斜体片段
    else if (part.startsWith('_') && part.endsWith('_')) {
      return <i key={idx}>{part.slice(1, -1)}</i>;
    }
    // 普通文本直接返回
    return part;
  });
};

// 组件内使用
function SafeTextDisplay({ content }) {
  return <div>{parseFormattedText(content)}</div>;
}

这个方案更安全，适合用户输入或不可信内容的场景，同时能正确识别所有多段格式化标记。

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