使用 React 实现自动文本链接

简介

在这个实验中，我们将致力于使用 React 创建一个自动文本链接组件。本实验的目的是学习如何使用正则表达式在字符串中查找 URL 并将其转换为适当的链接元素。在本实验结束时，你将更好地理解如何使用 React 自动链接文本中的 URL。

这是一个实验（Guided Lab），提供逐步指导来帮助你学习和实践。请仔细按照说明完成每个步骤，获得实际操作经验。根据历史数据，这是一个初级级别的实验，完成率为 93%。获得了学习者 100% 的好评率。

自动文本链接

虚拟机中已经提供了 index.html 和 script.js。一般来说，你只需要在 script.js 和 style.css 中添加代码。

这个组件将字符串渲染为纯文本，同时将 URL 转换为适当的链接元素。

为了实现这一点，它使用 String.prototype.split() 和 String.prototype.match() 以及一个正则表达式在给定字符串中查找 URL。然后，匹配到的 URL 将作为 <a> 元素返回，必要时会处理缺失的协议前缀。字符串的其余部分将渲染为纯文本。

以下是代码：

const AutoLink = ({ text }) => {
  const urlRegex =
    /((?:https?:\/\/)?(?:(?:[a-z0-9]?(?:[a-z0-9\-]{1,61}[a-z0-9])?\.[^\.|\s])+[a-z\.]*[a-z]+|(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3})(?::\d{1,5})*[a-z0-9.,_\/~#&=;%+?\-\\(\\)]*)/gi;

  const renderText = () => {
    return text.split(urlRegex).map((word, index) => {
      const urlMatch = word.match(urlRegex);
      if (urlMatch) {
        const url = urlMatch[0];
        return (
          <a key={index} href={url.startsWith("http") ? url : `http://${url}`}>
            {url}
          </a>
        );
      }
      return <span key={index}>{word}</span>;
    });
  };

  return <div>{renderText()}</div>;
};

ReactDOM.createRoot(document.getElementById("root")).render(
  <AutoLink text="foo bar baz http://example.org bar" />
);

请点击右下角的“Go Live”在 8080 端口运行 Web 服务。然后，你可以刷新Web 8080标签页来预览网页。

自动文本链接

简介

自动文本链接

总结