Reactでテキスト内のURLをリンクにする方法
React以下のような、文字列にURLが含まれているときに、自動でリンク(オートリンク)させる方法を紹介します。
以下の3つの方法を試してみました。
- Linkifyを使う方法
- react-string-replaceを使う方法
- 自前で実装する方法
それぞれの実装方法を紹介します。オススメは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つ紹介しました。