自動的なテキストリンク

ReactReactBeginner
今すぐ練習

This tutorial is from open-source community. Access the source code

💡 このチュートリアルは英語版からAIによって翻訳されています。原文を確認するには、 ここをクリックしてください

はじめに

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


Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL react(("React")) -.-> react/FundamentalsGroup(["Fundamentals"]) react/FundamentalsGroup -.-> react/jsx("JSX") react/FundamentalsGroup -.-> react/conditional_render("Conditional Rendering") react/FundamentalsGroup -.-> react/list_keys("Lists and Keys") subgraph Lab Skills react/jsx -.-> lab-38341{{"自動的なテキストリンク"}} react/conditional_render -.-> lab-38341{{"自動的なテキストリンク"}} react/list_keys -.-> lab-38341{{"自動的なテキストリンク"}} end

自動的なテキストリンク

VM内には既にindex.htmlscript.jsが用意されています。一般的には、script.jsstyle.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でさらに多くの実験を行って練習してください。