React Router Linkコンポーネントを動的に表示する

SNSのコメント情報などに含まれるハッシュタグ(#javaScriptとか)・ユーザ名(@yayocとか)を動的にリンクに変換したい場面で、リンクをReact RouterLinkコンポーネントで表したい場合の実装。

  linkedComment = (comment: string) => {
    const re = /([^@#]+)|([@#]{1}[^@#()\s]+)|([#+])|([@+])/g;
    const found = comment.match(re);
    if (found === null) return <span>{comment}</span>;

    const nodes = found.map(v => {
      if (v.search(/[@#]/i) === -1) return <span>{v}</span>;
      if (v.length <= 1) return <span>{v}</span>;

      const link = v.substring(0, 1) === "#"
        ? `/tag/${v.substr(1, v.length)}`
        : `/n/${v.substr(1, v.length)}`;
      return <Link to={link}>{v}</Link>;
    });
    return nodes;
  };

与えられた文字列に対して、該当するフォーマット/([@#]{1}[^@#()\s]+)/であれば、Linkコンポーネントを生成。当てはまらなければ、spanタグを返すという実装になっています。

ただの正規表現です。ハッシュタグ, @マークが並んだ際の無効化は考慮しています。 (正規表現もっとうまくかける気がしますが・・・) Imgur

本件とは関係ないですが、 ブログ更新滞っていたので、積極的に更新していきます💪