Заменить все совпадения в тексте на ссылку?

Question

[Илья]

Я получаю текст (каждый раз разный), где есть конструкциия [имя ссылки](сама ссылка). К примеру, имеем вот такой текст

Lorem ipsum dolor sit [amet](link to amet), consectetur adipiscing elit. Morbi maximus libero sapien, eu ornare enim sagittis ac. Suspendisse ut sodales ante. Mauris lacinia id libero sed aliquam. Mauris malesuada neque tincidunt metus fringilla ultricies. [Morbi](link to Morbi) et nisi eget lacus tincidunt viverra. Aenean quis nibh ut mauris tempor ultrices. Morbi eget aliquet erat. Morbi quis consequat justo. Suspendisse rhoncus sollicitudin aliquet. Proin tempor aliquam lacinia. Aenean elementum cursus risus at ultricies. Fusce [ac](link to ac) hendrerit justo, eget viverra risus. Donec volutpat tellus nec lacus ultrices dictum.

Вот такие конструкции в тексте могут быть где угодно, вместо них, мне нужно вставить в текст <Link to={link}>name of link</Link>

Не совсем представляю как это сделать...

Любая помощь будет ценной.

Answer 1

[Илья]

В общем, поступил так, взял готовое решение для Mardown React.

Код для вставки:

import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import { Link } from 'react-router-dom';
import Markdown from 'react-markdown';
import { getPaymentURLByType } from 'utils/URLsCollections';

function RouterLink(text) {
  return (
    text.href.match(/^(https?:)?\/\//)
      ? <a href={text.href}>{text.children}</a>
      : <Link to={getPaymentURLByType(text.href)}>{text.children}</Link>
  );
}

class ParagraphComponent extends PureComponent {
  static propTypes = {
    caption: PropTypes.string,
    text: PropTypes.string,
  };

  static defaultProps = {
    caption: '',
    text: '',
  };

  render() {
    const { caption, text } = this.props;
    return (
      <div data-block>
        <h3>{caption}</h3>
        <Markdown
          source={text}
          renderers={{ link: RouterLink }}
        />
      </div>
    );
  }
}

export default ParagraphComponent;

Решение взято на время, т.к. не пойму, как используя такое решение

text.replace(/\[(.*?)\]\((.*?)\)/gi, `${<Link to={getPaymentURLByType('$2')}>{'$1'}</Link>}`)

Заменить в тексте [object Object] из-за того что использую template literal.

Answer 2

[Максим]

Вам нужно искать с помощью регулярного выражения, конструкции типа:

[буквы/символы](буквы/символы)
// с регуляркой, к сожалению не подскажу, не силен
// зато подскажет StackOverflow
// https://stackoverflow.com/questions/37462126/regex-match-markdown-link

По мере их нахождения, брать первую найденую часть - ее вставлять вместо name of link, а вторую найденую часть - вместо link. Регулярки сохранять найденое в переменные (первое вхождение, второе вхождение) - тоже умеют.

Итого, что получается: нагуглив регулярку, или набросав ее в онлайн редакторе (я использую этот) вы получите необходимые вам переменные в массиве, затем с легкостью сможете преобразовать все вхождения с помощью .replace на <Link to={link}>name of link</Link>

Answer 3

[0xD34F]

Режете текст на куски регуляркой, соответствующей ссылкам (важный момент: надо поместить всё выражение в скобки, это позволит получить в результирующем массиве и сами разделители - будущие ссылки), обходите полученный массив - если элемент соответствует регулярке, делаете ссылку, нет - оставляете как есть. Типа так.