自動的なテキストリンク

はじめに

この実験では、React を使って自動的なテキストリンクコンポーネントを作成します。この実験の目的は、文字列内の URL を見つけ、適切なリンク要素に変換するために正規表現をどのように使用するかを学ぶことです。この実験が終了するまでに、React を使ってテキスト内の URL を自動的にリンクする方法をより深く理解するようになります。

自動的なテキストリンク

VM 内には既にindex.htmlとscript.jsが用意されています。一般的には、script.jsとstyle.cssにのみコードを追加すればよいです。

このコンポーネントは、文字列内の URL を適切なリンク要素に変換して、平文としてレンダリングします。

これを達成するために、与えられた文字列内の URL を見つけるために、String.prototype.split()とString.prototype.match()を正規表現とともに使用します。一致した URL は、必要に応じて欠落しているプロトコル接頭辞を処理しながら、<a>要素として返されます。文字列の残りの部分は平文としてレンダリングされます。

以下がコードです。

const AutoLink = ({ text }) => {
  const urlRegex =
    /((?: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;

  const renderText = () => {
    return text.split(urlRegex).map((word, index) => {
      const urlMatch = word.match(urlRegex);
      if (urlMatch) {
        const url = urlMatch[0];
        return (
          <a key={index} href={url.startsWith("http") ? url : `http://${url}`}>
            {url}
          </a>
        );
      }
      return <span key={index}>{word}</span>;
    });
  };

  return <div>{renderText()}</div>;
};

ReactDOM.createRoot(document.getElementById("root")).render(
  <AutoLink text="foo bar baz http://example.org bar" />
);

右下隅の「Go Live」をクリックして、ポート 8080 でウェブサービスを実行してください。その後、Web 8080タブを更新して、ウェブページをプレビューできます。

まとめ

おめでとうございます！あなたは自動的なテキストリンクの実験を完了しました。あなたの技術を向上させるために、LabEx でさらに多くの実験を行って練習してください。