如何在React中将文本内的指定单词替换为超链接

你原来的写法无法正常运行，因为String.replace方法的返回值为字符串类型，直接传入JSX元素作为替换参数时，React会将JSX转为[object Object]字符串渲染，无法生成可点击的超链接。

单关键词替换实现 #

const text = "编辑 src/App.js 并保存以重载页面。"

const renderTextWithLink = () => {
  // 按目标关键词拆分原文本
  const textParts = text.split("编辑");
  return (
    <>
      {textParts[0]}
      <a
        className="App-link"
        href="你的目标跳转地址"
        target="_new"
        rel="noopener noreferrer"
      >
        编辑
      </a>
      {textParts[1]}
    </>
  )
}

return (
  <div className="App">
    <header className="App-header">
      <img src={logo} className="App-logo" alt="logo" />
      <p>
        {renderTextWithLink()}
      </p>
    </header>
  </div>
);

多关键词通用替换方案 #

如果需要批量替换多个相同的关键词，可以使用以下通用函数：

/**
 * 文本关键词转超链接工具函数
 * @param {string} text 原文本内容
 * @param {string} keyword 要替换为超链接的关键词
 * @param {object} linkProps 超链接的所有属性配置
 * @returns 可直接渲染的React节点数组
 */
const replaceKeywordToLink = (text, keyword, linkProps) => {
  // 全局匹配关键词
  const matchReg = new RegExp(`(${keyword})`, 'g');
  return text.split(matchReg).map((part, index) => {
    if (part === keyword) {
      return <a key={index} {...linkProps}>{part}</a>
    }
    return part;
  })
}

// 调用示例
const text = "编辑 src/App.js 并保存以重载页面。"
return (
  <div className="App">
    <header className="App-header">
      <img src={logo} className="App-logo" alt="logo" />
      <p>
        {replaceKeywordToLink(text, "编辑", {
          className: "App-link",
          href: "你的目标跳转地址",
          target: "_new",
          rel: "noopener noreferrer"
        })}
      </p>
    </header>
  </div>
)

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