[React] 最短で\nを<br>に変換する方法

最短で\nを<br>に変換する方法

テキストを分離して奇数個目を<br>、偶数個目を普通に出力します
split で分離するとき正規表現で()を使い\n自体を抽出することで、確実に位置を特定できます

export default () => {
  const text = "あいうえお\nかきくけこ\nさしすせそ";
  return <div>{text.split(/(\n)/).map((v, i) => (i & 1 ? <br key={i} /> : v))}</div>;
};

最短でURLを<a>に変換する方法

ついでに URL をリンクに変換する例も置いていきます

export default () => {
  const text = "あいうえおhttps://www.yahoo.co.jpかきくけこhttp://google.com/さしすせそ";
  return (
    <div>
      {text.split(/(https?:\/\/[\w!\?/\+\-_~=;\.,\*&@#\$%\(\)'\[\]]+)/).map((v, i) =>
        i & 1 ? (
          <a key={i} href={v}>
            {v}
          </a>
        ) : (
          v
        )
      )}
    </div>
  );
};