1

tengo que analizar distintos mensajes que provienen de una API y en caso de contener un link, procesar el mismo y mostrarlo en una etiqueta . Les muestro el codigo de la funcion que utilizo.

    function urlText(text) {
        var urlRegex = /(https?:\/\/[^\s]+)/g;
        const newText = text.replace(urlRegex, function (url) {
            return <a target='_blank' href={url}>{url}</a>
        })
        return newText
    }

a esta funcion la llamo en una etiqueta

el problema esta que cuando renderiza el componente obtengo este reusltado:

supongamos que el texto es el siguiente:

https://www.youtube.com/ este es un texto de pruebas

lo que renderiza el componente luego de ejecutar la funcion urlText es lo siguiente:

<a target='_blank' href={url}>{url}</a> this is a text message

1 respuesta 1

0

Lo que te renderiza supongo que es:

[object Object] este es un texto de pruebas

Esto pasa porque con text.replace(... reemplazas un texto por un objeto y javascript intenta comvertir el objecto (<a target='_blank' ...) en texto. Como no sabe como hacerlo te devuelve [object Object]. Por lo tanto el primer paso será hacer que la función urlText devuelva el texto correctamente procesado:

function urlText(text) {
  var urlRegex = /(https?:\/\/[^\s]+)/g;
  const newText = text.replace(urlRegex, function (url) {
      return `<a target='_blank' href=${url}>${url}</a>`
  })
  return newText
}

Luego podrás renderizarlo, pero utilizando dangerouslySetInnerHTML para poder cargar HTML directamente en react:

function urlText(text) {
  var urlRegex = /(https?:\/\/[^\s]+)/g;
  const newText = text.replace(urlRegex, function (url) {
      return `<a target='_blank' href=${url}>${url}</a>`
  })
  return newText
}

ReactDOM.render(
  <div
      dangerouslySetInnerHTML={{__html: urlText('https://www.youtube.com/ este es un texto de pruebas')}}
  />
  , 
  document.getElementById('root')
)
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.