Replace all matches in text with a link?

Question

JavaScript

I get text (different each time) where there are [link name](link itself) constructs . For example, we have the following text

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.

These constructions in the text can be anywhere, instead of them, I need to insert into the text I don’t quite understand how to do this ... Any help would be valuable. <Link to={link}>name of link</Link>

Answer 1

In general, I did this, I took a ready-made solution for Mardown React .
Embed code:

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;

The decision was taken on time, because I don't understand how to use this solution
Replace in the text with [object Object] due to the fact that I use template literal.

Answer 2

You need to search with a regular expression, a construct like:

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

As they are found, take the first found part - insert it instead of the name of link, and the second found part - instead of link. Regulars can save what they found in variables (the first occurrence, the second occurrence) - they also know how.
The result is: by googling a regular expression, or by sketching it in an online editor (I use this one ), you will get the variables you need in an array, then you can easily convert all occurrences using .replace to<Link to={link}>name of link</Link>

Answer 3

Cut the text into pieces with a regular expression corresponding to links (an important point: you need to put the entire expression in brackets, this will allow you to get the separators themselves in the resulting array - future links), bypass the resulting array - if the element matches the regular expression, make a link, no - leave it as it is . Like so .