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
Last active
December 4, 2018 14:50
-
-
Save m0rtyn/1811fdde774523a44e1004a6ba369307 to your computer and use it in GitHub Desktop.
React/TypeScript/RegExp code example
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment