如何在react-markdown中将---转为破折号、...为省略号及替换引号？

方案：使用remark-smartypants插件 #

remark-smartypants是专门处理标点符号转换的remark插件，可直接满足你的三个需求：

• 将三个点...转换为省略号…
• 将三个短横线---转换为长破折号—
• 将直引号"text"替换为弯引号“text”

步骤1：安装插件 #

执行安装命令：

npm install remark-smartypants
# 或使用yarn
yarn add remark-smartypants

步骤2：在react-markdown中配置插件 #

在React组件中导入依赖并启用插件：

import ReactMarkdown from 'react-markdown';
import smartypants from 'remark-smartypants';

function MarkdownRenderer({ content }) {
  return (
    <ReactMarkdown
      remarkPlugins={[smartypants]}
    >
      {content}
    </ReactMarkdown>
  );
}

// 使用示例
const demoContent = `
示例文本1...
示例文本2---测试
"需要转换的直引号文本"
`;

export default function App() {
  return <MarkdownRenderer content={demoContent} />;
}

自定义转换（可选） #

如果不想依赖第三方插件，可自行编写简单的remark插件处理文本节点：

import ReactMarkdown from 'react-markdown';
import { visit } from 'unist-util-visit';

// 自定义标点转换插件
const customPunctPlugin = () => {
  return (tree) => {
    visit(tree, 'text', (node) => {
      // 替换三个点为省略号
      node.value = node.value.replace(/\.\.\./g, '…');
      // 替换三个短横线为长破折号
      node.value = node.value.replace(/---/g, '—');
      // 替换直引号为弯引号（注：简单正则无法处理嵌套等复杂场景）
      node.value = node.value.replace(/"([^"]+)"/g, '“$1”');
    });
  };
};

function MarkdownRenderer({ content }) {
  return (
    <ReactMarkdown
      remarkPlugins={[customPunctPlugin]}
    >
      {content}
    </ReactMarkdown>
  );
}

注意：自定义正则替换可能会误处理代码块内的标点，而remark-smartypants会自动区分文本与代码场景，更适合生产环境使用。

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