Как правильно вставить html тег в строку, чтобы он отрисовался как dom элемент?

Question

[toster111]

Нужно в строке текста найти ссылку и сделать ее кликабельной, то есть по сути вырезать текст ссылки и заменить его на тег <a href='ссылка'>ссылка</a>.

Написала такую функцию:

getTitle(title = 'Подробнее по ссылке: https://yandex.ru бла бла') {
    const regExp = /[-a-zA-Z0-9@:%_\+.~#?&\/=]{2,256}\.[a-z]{2,4}\b(\/[-a-zA-Z0-9@:%_\+.~#?&\/=]*)?/;

    if (title.match(regExp)) {
      const url = title.match(regExp)[0];
      const link = <a href={url}>{url}</a>;

      return title.replace(url, link);
    } else return title;
}

и в результате получаю такую строку: Подробнее по ссылке: [object Object] бла бла.
Я понимаю, что тег это объект, поэтому так происходит, но не понимаю как правильно вставить его, чтобы он отрисовался как нормальный dom элемент.

Comments

[WapSter]

Вставлять как строку через innerHTML к примеру

[sinneren]

еще можно погуглить такую штуку как DOMParser

Answer 1

[0xD34F]

Можно dangerouslySetInnerHTML использовать. Например.

Но вообще, это тут не обязательно.