How to convert all email addresses to links and put them into a React component?-CodePudding

I have the following code in one my components:

return <Box>{props.children}</Box>

All this does is return the contents in a nicely formatted <div> box. Now what I want to do is if there are any email addresses in props.children, I want to render those as links. So for example, if the content was as follows:

Hi my name is Foo, you can contact me at [email protected].

Then I would like the component to return this:

<div >
  Hi my name is Foo, you can contact me at <a href="mailto:[email protected]">[email protected]</a>.
<div>

How do I do this? I was thinking of using regex to find all email addresses and add the <a> tags to them, but that didn't seem to work. Any help is appreciated here!

CodePudding user response：

You can use regex

const str = `Hi my name is Foo, you can contact me at [email protected], [email protected]`;


console.log(str.replace(/(\w @\w .\w ) /g, "<a href='mailto:$1'>$1</a>"));

Output:

"Hi my name is Foo, you can contact me at <a href='mailto:[email protected]'>[email protected]</a>, <a href='mailto:[email protected]'>[email protected]</a>"

CodePudding user response：

I am assuming that "props.chaildren" text has only one email.

import React from 'react';

function isContainEmail() {
    //Write your logic to find this and I am assuming this function will return email address otherwise null
    return '[email protected]';
}
function splitByEmail() {
    //  Do your logic to split the email from text and send both part in a array
    return [
        'Hi my name is Foo, you can contact me at',
        '. Some others line go here',
    ];
}
function generateTemplateForUser(text) {
    const email = isContainEmail(text);
    if (!email) return <div className='box'>{text}</div>;
    const linkProps = {
        href: `mailto:${email}`,
    };
    const textSplittedByEmail = splitByEmail(text);
    return (
        <div className='box'>
            {textSplittedByEmail[0]} <a {...linkProps}> {email}</a>
            {textSplittedByEmail[1]}
        </div>
    );
}
function App(props) {
    return (
        <>
            {/* Please pass your props.children value in place of hardcoded value */}
            {generateTemplateForUser(
                'Hi my name is Foo, you can contact me at [email protected]. Some others line go here....',
            )}
        </>
    );
}

export default App;

Stackblitz Link

This solution will not work if you can have multiple emails in your text. Feel free to comment if you have any doubts.