React 30 秒速学：制作自动识别链接的文本组件

本文译自：30-seconds-of-react。React 30 秒速学：全篇中文翻译、学习，地址：30-seconds-of-react-zh_CN-umi，所有案例进行分析、注释、上线。

30-seconds-of-react 教程里， String 这一节做了一个自动识别文本中的链接的组件，还挺实用，也可以加深我们对正则使用的了解。

AutoLink自动识别文本中的链接

将字符串中的URL转换为适当的 <a> 元素。

• 使用正则表达式配合 String.prototype.split() 和 String.prototype.match()来查找字符串中的URL。
• 返回一个<React.Fragment>不产生多余的元素；其匹配的URL呈现为<a>元素，必要时需要处理丢失的协议前缀补充为http://，并将其余字符串呈现为明文。

import React from "react";
function AutoLink({ text }) {
  // 用于找 url 的正则表达式
  const delimiter = /((?: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;

  return (
    <React.Fragment>
      {/* 按正则分割为数组，最终渲染时被显示在了一起 */}
      {text.split(delimiter).map(word => {
        // foo bar baz
        // http://example.org
        //  bar
        console.log(word);
        // 从以上分割的内容中找到具体的url的部分
        // 进行超链接的处理
        let match = word.match(delimiter);
        if (match) {
          let url = match[0];
          return (
            <a href={url.startsWith("http") ? url : `http://${url}`} key={url} target="_blank">{url}</a>
          );
        }
        return word;
      })}
    </React.Fragment>
  );
}
复制代码

例子

export default function() {
  return <AutoLink text="foo bar baz http://example.org barhttp://baidu.com 123" />;
}
复制代码

• 示例代码
• 运行效果