React/TypeScript/RegExp code example

code-example.md

  import * as React from 'react'

  import { Paragraph } from '@appName/model/staticPageContent'
  import Link, { HtmlLink } from '@appName/ui/atoms/Link'
  import * as styles from './Text.css'

  interface Props {
    paragraphs: Paragraph[]
  }

  // match "https://www.website-name.ru/any-path"
  const URL_REG_EXP = /https?:\/\/www\.websiteName\.(?:ru|com)(?:\/\w*-?\w*)*/g
  // match relative path of url
  const PATH_REG_EXP = /(?:websiteName\.(?:ru|com)\/)(\w*-?)+/
  // match "any-address@website-name.ru|com"
  const EMAIL_REG_EXP = /[a-z0-9\-\_\.]+\@websiteName+\.(?:ru|com)/i

  const Text = ({ paragraphs }: Props) => (
    <React.Fragment>
      {paragraphs.map((paragraph: Paragraph, i: number) => {
        const text = paragraph.text
        const index = paragraph.index
        const url = text.match(URL_REG_EXP)
        const isPathExist = text.search(PATH_REG_EXP) !== -1
        const path = isPathExist ? text.match(PATH_REG_EXP)[1] : '/'
        const email = text.match(EMAIL_REG_EXP)

        const wrapLinks = (chunk, chunkIndex) => (
          <React.Fragment>
            {
              chunk.split(EMAIL_REG_EXP)
              .map((subChunk: string, subChunkIndex: number) =>
                <React.Fragment>
                  {subChunk}
                  {wrapEmails(chunk, subChunk, chunkIndex, subChunkIndex)}
                </React.Fragment>,
              )
            }
            {
              url
              && <Link
                to={path}
                className={styles.Link}
                underline
              >
                {url[chunkIndex]}
              </Link>
            }
          </React.Fragment>
        )

        const wrapEmails = (chunk, subChunk, chunkIndex, subChunkIndex) => (
          chunk.match(EMAIL_REG_EXP)
            && <HtmlLink
              href={`mailto:${email[subChunkIndex]}`}
              className={styles.Link}
              underline
            >
              {email[subChunkIndex]}
            </HtmlLink>
        )

        return <p key={index} className={styles.textParagraph}>
          {index && <span className={styles.textIndex}>{index} </span>}

          {text.split(URL_REG_EXP)
            .map((chunk: string, chunkIndex: number) =>
              <React.Fragment>
                {wrapLinks(chunk, chunkIndex)}
              </React.Fragment>,
            )}
        </p>
      })}
    </React.Fragment>
  )

  export default Text