React 30 秒速學：製做自動識別連接的文本組件

本文譯自：30-seconds-of-react。React 30 秒速學：全篇中文翻譯、學習，地址：30-seconds-of-react-zh_CN-umi，全部案例進行分析、註釋、上線。

系列文章：

• React 30 秒速學：把數組數據渲染爲列表、表格
• React 30 秒速學：製做輸入框、密碼可見、滑塊組件、下拉選擇器、複選框組件
• React 30 秒速學：製做多行文本組件，限制字符數和單詞數
• React 30 秒速學： 實現可摺疊、無限層級的樹形組件
• React 30 秒速學：製做自動識別連接的文本組件
• React 30 秒速學：製做手風琴組件
• React 30 秒速學：製做輪播組件
• React 30 秒速學：製做摺疊面板組件
• React 30 秒速學：製做倒計時組件
• React 30 秒速學：製做文件拖放組件
• React 30 秒速學：製做模態框組件
• React 30 秒速學：製做星級評分組件
• React 30 秒速學：製做選項卡組件

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" />; } 複製代碼

• 示例代碼
• 運行效果