自動的なテキストリンク

はじめに

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

Skills Graph

自動的なテキストリンク

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でさらに多くの実験を行って練習してください。