¿Alguien tiene sugerencias para detectar el enlace del texto? Actualmente en reaccionar, solo estoy revisando la expresión regular para el enlace usando el siguiente código:
urlify(text) { var urlRegex = (new RegExp("([a-zA-Z0-9]+://)?([a-zA-Z0-9_]+:[a-zA-Z0-9_]+@)?([a-zA-Z0-9.-]+\\.[A-Za-z]{2,4})(:[0-9]+)?(/.*)?")); return text.replace(urlRegex, function (url) { return '<a href="' + url + '" target="_blank">' + url + '</a>'; });} render() { let description="this is my [web](http://stackoverflow.com), this is [Google](https://www.google.com/)" return ( <p dangerouslySetInnerHTML={{__html: this.urlify(description)}}></p> );}La salida para el código anterior se muestra como se muestra aquí
Pero solo quiero mostrar texto como Esta es mi web
Si quisiera continuar usando dangerouslySetInnerHTML SetInnerHTML, podría usar esta combinación/reemplazo para crear un ancla...
const text = 'this is my [web](https://www.google.com/)' const regex = /(.+)\[(.+)\]\((.+)\)/; const anchor = text.replace(regex, (match, a, b, c) => { const text = `${a[0].toUpperCase()}${a.substring(1)}${b}`; return `<a href="${c}">${text}</a>`; }); console.log(anchor);...o podría crear un componente a medida que asigne la salida de la matriz de la coincidencia a algún JSX que cree un ancla.
function MarkdownAnchor({ markdown }) { const regex = /(.+)\[(.+)\]\((.+)\)/; const match = markdown.match(regex); function formatText(str) { return `${str[0].toUpperCase()}${str.substring(1)}` } return ( <a href={match[3]}> {formatText(`${match[1]}${match[2]}`)} </a> ); } const markdown = 'this is my [web](https://www.google.com/)'; ReactDOM.render( <MarkdownAnchor markdown={markdown} />, document.getElementById('react') ); <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script> <div id="react"></div>