React自定义Linkify组件无法识别链接求助：输入链接仍为纯文本

问题重现 #

需求是实现一个React组件，自动识别文本中的链接（如http://localhost:3000/）并转为可点击的<a>标签，但当前代码运行后链接仍显示为纯文本。

原组件代码（Linkify.jsx） #

import DOMPurify from 'dompurify'
const Linkify = ({ children }) => {
  const isUrl = (word) => {
    const urlPattern = /^(http:\/\/www\.|https:\/\/www\.|http:\/\/|https:\/\/)?[a-z0-9]+([\-\.]{1}[a-z0-9]+)*\.[a-z]{2,5}(:[0-9]{1,5})?(\/.*)?$/gm;
    return word.match(urlPattern);
  };

  const addMarkup = (word) => {
    return isUrl(word) ? `<a class="text-blue-500 hover:text-blue-600 transition" href="${word}">${word}</a>` : `<span className="no-underline">${word}</span>`;
  };

  const words = children.split(" ");
  const formatedWords = words.map((w, i) => addMarkup(w));

  const html = DOMPurify.sanitize(formatedWords.join(' '))

  return <span  dangerouslySetInnerHTML={{ __html: html }} />;
};

export default Linkify;

测试代码 #

import Linkify from "./Linkify"

const Test = () => {
  return (
    <div>
      <Linkify>
      http://localhost:3000/
      </Linkify>
    </div>
  )
}

export default Test

问题原因 #

核心问题是正则表达式无法匹配localhost这类没有顶级域名（如.com、.cn）的链接：
原正则中的\.[a-z]{2,5}要求链接必须包含至少2位字母的域名后缀，但localhost没有这个后缀，导致isUrl函数返回null，不会将其转为链接标签。

解决方法 #

修改正则表达式，支持localhost、IP地址、带端口的链接以及常规域名链接：

修改后的Linkify组件代码 #

import DOMPurify from 'dompurify'
const Linkify = ({ children }) => {
  // 更新正则：支持localhost、IP、带端口的链接
  const isUrl = (word) => {
    const urlPattern = /^(http:\/\/www\.|https:\/\/www\.|http:\/\/|https:\/\/)?(localhost|[0-9]{1,3}(\.[0-9]{1,3}){3}|[a-z0-9]+([\-\.]{1}[a-z0-9]+)*\.[a-z]{2,5})(:[0-9]{1,5})?(\/.*)?$/gm;
    return word.match(urlPattern);
  };

  const addMarkup = (word) => {
    return isUrl(word) ? `<a class="text-blue-500 hover:text-blue-600 transition" href="${word}">${word}</a>` : `<span>${word}</span>`;
  };

  const words = children.split(" ");
  const formatedWords = words.map((w, i) => addMarkup(w));

  const html = DOMPurify.sanitize(formatedWords.join(' '))

  return <span dangerouslySetInnerHTML={{ __html: html }} />;
};

export default Linkify;

关键修改说明 #

1. 正则表达式更新：
   • 添加localhost直接匹配本地域名
   • 添加[0-9]{1,3}(\.[0-9]{1,3}){3}匹配IP地址（如127.0.0.1）
   • 保留原有的常规域名匹配逻辑，让正则同时支持多种链接格式
2. 移除了无用的className="no-underline"（原生HTML的span不识别React的className属性，直接用普通span即可）

额外优化建议 #

• 如果需要处理连续空格、换行等情况，可以用split(/\s+/)代替split(" ")，避免生成空字符串元素
• 可以给链接添加target="_blank"和rel="noopener noreferrer"属性，提升安全性和体验：

  `<a class="text-blue-500 hover:text-blue-600 transition" href="${word}" target="_blank" rel="noopener noreferrer">${word}</a>`
  

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