React项目中使用React Mention时，正则提取提及对象姓名与用户名并转换为链接的技术求助

DevOps 小满

2026-4-14

嗨，我来帮你搞定这个问题！你现在的核心需求是从@[姓名](用户名)这种格式的提及文本里，同时把姓名和用户名都提取出来，然后转成React里可点击的链接对吧？

你之前用的正则@[[A-Za-z0-9 ]+]只能匹配到姓名部分的外壳，没覆盖后面的用户名括号，所以拿不到完整的信息。我给你一个能同时捕获姓名和用户名的正则表达式：

/@\[([^\]]+)\]\(([^)]+)\)/g

我给你拆解下这个正则的逻辑：

@\[ ：匹配@[这个固定前缀（因为[在正则里是特殊字符，所以要加反斜杠转义）
([^\]]+) ：第一个捕获组，专门抓姓名——匹配除了]之外的所有字符，不管是中文、空格还是引号都能搞定，比如Gustavo "Gus" Fring这种带引号的姓名也能完整捕获
\]\( ：匹配](这个中间的固定分隔符（同样转义了特殊字符）
([^)]+) ：第二个捕获组，抓用户名——匹配除了)之外的所有字符
最后的g是全局标志，保证能一次性把文本里所有的提及都找出来

接下来结合React的场景，我给你写一个实用的工具函数，把原始文本转换成React能正确渲染的链接节点：

// 如果你用react-router的Link组件，就先引入；如果是自定义的链接组件，换成你自己的
import { Link } from 'react-router-dom';

function formatMentionText(originalText) {
  // 刚才的正则，加上全局匹配
  const mentionRegex = /@\[([^\]]+)\]\(([^)]+)\)/g;
  // 用来存拆分后的文本节点和链接节点
  const renderParts = [];
  let lastTextPosition = 0;
  let currentMatch;

  // 循环遍历所有匹配到的提及
  while ((currentMatch = mentionRegex.exec(originalText)) !== null) {
    // 把提及之前的普通文本先塞进数组
    if (currentMatch.index > lastTextPosition) {
      renderParts.push(originalText.slice(lastTextPosition, currentMatch.index));
    }

    // 从匹配结果里取出姓名和用户名
    const [fullMatch, userName, userSlug] = currentMatch;
    // 把提及转换成Link组件，这里的to属性可以根据你的需求改，比如跳转到用户详情页的路由
    renderParts.push(
      <Link 
        key={`mention-${fullMatch}-${currentMatch.index}`} 
        to={`/users/${userSlug}`}
        className="mention-link" // 可以加自定义类名做样式
      >
        @{userName}
      </Link>
    );

    // 更新文本位置，继续处理剩下的内容
    lastTextPosition = mentionRegex.lastIndex;
  }

  // 把最后一段没匹配到提及的普通文本加进去
  if (lastTextPosition < originalText.length) {
    renderParts.push(originalText.slice(lastTextPosition));
  }

  return renderParts;
}

// 然后在你的组件里这么用：
function MentionTextDisplay() {
  const text = 'Hello @[Walter White](walter) with @[中本聪](satoshi1) are you @[Gustavo "Gus" Fring](gus) ok?';
  return <div className="mention-content">{formatMentionText(text)}</div>;
}

这个函数的好处是，它会把原始文本拆分成普通文本节点和Link组件节点，React能直接渲染成可点击的链接，而不是把链接当成字符串输出。

另外提一句，如果你是在React Mention的输入过程中处理提及，其实这个包本身提供了renderSuggestion或者onAddMention这类回调，你可以在添加提及的时候就直接渲染成链接，不过看你的描述是要处理已有的文本，那上面的正则+工具函数的方案就完全适用。

备注：内容来源于stack exchange，提问作者Aris