ReactでURLなどテキストの一部をJSXに置き換える方法

ユーザーからの入力を直接dangerouslySetInnerHTMLを使って出力させるのはまずいので、正規表現に引っかかるもののみをJSXタグに変更します。ただこれでセキュリティ的にokかわからないので使うときは自己責任でお願いします。

1. simple-text-parserというライブラリ(https://www.npmjs.com/package/simple-text-parser)を使い正規表現で引っかかった部分に対して、生のHTMLタグをstringとして返す。
2. dangerouslySetInnerHTMLにわたす。

/* eslint-disable react/no-danger */
import React from 'react';
import { Parser } from 'simple-text-parser';
import urlRegex from 'url-regex';

type TextRendererProps = { text: string };

const parser = new Parser();
const re = urlRegex();

parser.addRule(re, (url) => {
  return `<a src="${url}" target="_blank" rel="noopener noreferrer">${url}</a>`;
});

export const TextRenderer: React.FC<TextRendererProps> = ({ text }) => {
  return (
    <span
      dangerouslySetInnerHTML={{
        __html: parser.render(text),
      }}
    />
  );
};

使い方

<TextRenderer text="ほげほげ https://google.com ふがふが" />
// 出力: ”ほげほげ ”<a src="https://google.com" target="_blank" rel="noopener noreferrer">https://google.com</a>" ふがふが"