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

SlackやTwitterでURLを貼り付けて投稿するとURLの部分がリンクになってクリックできるようになりますが、あれをReact(Next.js)でやる方法です。

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

サンプル

import reactStringReplace from 'react-string-replace';

const text = 'URLをご確認ください。https://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技術ブログ
↓↓「にほんブログ村」のランキングに参加しています。少しでも面白い、参考になったとか思われたらポチッとしていただけると嬉しいです!

にほんブログ村 IT技術ブログへ

にほんブログ村