Tengo el siguiente código en uno de mis componentes:
return <Box>{props.children}</Box> Todo lo que hace es devolver el contenido en un cuadro <div> bien formateado. Ahora lo que quiero hacer es si hay direcciones de correo electrónico en props.children , quiero representarlas como enlaces. Entonces, por ejemplo, si el contenido fuera el siguiente:
Hi my name is Foo, you can contact me at foo@bar.com.Entonces me gustaría que el componente devuelva esto:
<div class="box"> Hi my name is Foo, you can contact me at <a href="mailto:foo@bar.com">foo@bar.com</a>. <div> ¿Cómo hago esto? Estaba pensando en usar expresiones regulares para encontrar todas las direcciones de correo electrónico y agregarles las etiquetas <a> , pero eso no pareció funcionar. ¡Cualquier ayuda es apreciada aquí!
Puedes usar expresiones regulares
const str = `Hi my name is Foo, you can contact me at foo@bar.com, foo@yan.net`; console.log(str.replace(/(\w+@\w+.\w+)+/g, "<a href='mailto:$1'>$1</a>"));Producción:
"Hi my name is Foo, you can contact me at <a href='mailto:foo@bar.com'>foo@bar.com</a>, <a href='mailto:foo@yan.net'>foo@yan.net</a>"Supongo que el texto " props.chaildren " tiene solo un correo electrónico.
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 'foo@bar.com'; } 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 foo@bar.com. Some others line go here....', )} </> ); } export default App;Esta solución no funcionará si puede tener varios correos electrónicos en su texto. Siéntase libre de comentar si tiene alguna duda.
Actualizar
Si tiene varios correos electrónicos en texto, utilice html-react-parser .
import React from 'react'; import parser from 'html-react-parser'; // Copy from @denelvis's answer const formatText = (text) => { return text.replace(/(\w+@\w+.\w+)+/g, "<a href='mailto:$1'>$1</a>"); }; function App(props) { return ( <> {/* Please pass your props.children value in place of hardcoded value */} {parser( formatText( 'Hi my name is Foo, you can contact me at foo@bar.com. Some others line go here.Hi my name is Dummy, you can contact me at foo@bar.com' ) )} </> ); } export default App;