【React】文字列内のURLをリンク(aタグ)にしたい

SlackやTwitter、LineなどでURLを貼り付けて投稿するとURLの部分がリンクになり、クリックするとそのURLのページを開くことができますが、あれをReact（Next.js）でやる方法です。

「react-string-replace」を使うと実現できます。

サンプル

import reactStringReplace from 'react-string-replace';

const text = 'URLをご確認ください。https://www.dabohaze.site よろしくお願いします。'

const Sample = () => {
  return (
    <p>
      {reactStringReplace(text, /(https?:\/\/\S+)/g, (match, i) => (
        <a key={i} href={match} target="_blank">{match}</a>
      ))}
    </p>
  )
}

export default Sample

reactStringReplaceの第一引数の文字列内に第二引数の正規表現にマッチするパターンがあった場合、文字列を置換してくれます。

「match」には正規表現にマッチした文字列が入るので、上記の場合はURLが入るのでそれをhrefと文字列に指定しています。

正規表現にマッチする文字列が複数存在する場合は全て置換してくれますし、正規表現なのでURL以外にも電話番号やハッシュタグなどにも使用できます。

IT技術ブログ
↓↓「にほんブログ村」のランキングに参加しています。少しでも面白い、参考になったとか思われたらポチッとしていただけると嬉しいです！

にほんブログ村