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

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

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 (    
    
           {/* 按正则分割为数组，最终渲染时被显示在了一起 */}      {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 (            
     {url}          );        }        return word;      })}    
      );}复制代码

例子

export default function() {  return 
    ;}复制代码