Reactでテキスト内のURLをリンクにする方法

以下のような、文字列にURLが含まれているときに、自動でリンク(オートリンク)させる方法を紹介します。

テキストの中にURLが含まれている
URLをリンクに変換させたい

以下の3つの方法を試してみました。

  1. Linkifyを使う方法
  2. react-string-replaceを使う方法
  3. 自前で実装する方法

それぞれの実装方法を紹介します。オススメはLinkifyを使う方法です。

Linkify

1番のオススメは、Linkifyを使う方法です。英語ですが、ドキュメントもしっかり整っていますし、更新履歴も新しめです。

まずは、インストールします。

npm install linkifyjs linkify-react

あとは、以下のように実装するだけです。

import Linkify from "linkify-react";

// テキスト
var text = "おすすめのサイトは https://google.com です。"

// linkifyのオプション
// tailwindを使っていると、そのままスタイルを指定できます
const linkifyOptions = {
    className: "text-blue-400",
};

return (
    <div>
        <Linkify as="p" options={linkifyOptions}>
            {text}
        </Linkify>
   </div>
);

とても簡単ですね。

react-string-replace

こちらもプラグインを使う方法です。Linkifyと同じように使えます。ちょっと更新頻度が少ないのが気になりますが、普通に使えます。

まずは、インストールします。

npm install react-string-replace 

あとは、以下のように実装すればOKです。

import reactStringReplace from "react-string-replace";

// テキスト
var text = "おすすめのサイトは https://google.com です。"

return (
    <div>
        {reactStringReplace(text, /(https?:\/\/\S+)/g, (match, i) => (
            <a key={i} href={match} className="text-blue-400">
              {match}
            </a>
          ))}
    </div>
);

自前で実装

最後は、自前で実装する方法です。以下のサイトの情報を参考に実装しました。

自前で実装するとカスタマイズがやり易いのですが、dangerouslySetInnerHTMLを使うのを避けたかったので、こちらの方法は用いませんでした。

テキストをリンクに置き換える関数は、以下の通り(上記サイトのコードを拝借してます)

// テキスト内のURLをリンクにする
export const textToLink = (comment: string) => {
  // 正規表現でURLを抽出
  const regexp_url = /(https?:\/\/[\w/:%#\$&\?\(\)~\.=\+\-]+)/g;
  let linkedComment = comment.replace(regexp_url, '<a href="$1" class="text-blue-400">$1</a>');

  return linkedComment;
};

あとは、関数を呼ぶだけ。

// テキスト
var text = "おすすめのサイトは https://google.com です。"

return (
    <div dangerouslySetInnerHTML={{__html: textToLink(text)}}>
    </div>
);

まとめ

Reactでテキスト内のURLをリンクさせる方法を3つ紹介しました。