0

Estoy creando un blog en Next.js y moongose, cuando hago fetch de un dato desde la db

const blog = await fetchBlog(searchParams.id.trim());

Estoy obteniendo los datos ya formateados, tiene un campo description el cual trae un texto largo, ahora cuando lo muestro en el front seria asi:

<p>{blog.description}</p>

justo como en react...la pregunta es si yo quiero acceder a una palabra en particular que viene en ese texto para agregarle un anchor o una negrita, como lo hago?

introducir la descripción de la imagen aquí

por ejemplo todo este texto es {blog.description} y necesito acceder a una palabra para envolverla en un anchor....

3
  • ¿Con qué estás trabajando en el front? ¿JS puro? ¿Algún framework/librería?
    – padaleiana
    Commented el 25 ago. 2023 a las 14:45
  • estoy trabajando con Next.js 13 y mongoose, en el front con un flowite para los componentes Commented el 25 ago. 2023 a las 15:08
  • 1
    Hola, Bienvenid@ al Sitio, veo que eres nuev@ te recomendaria hacer el recorrido de bienvenida para que conoscas mejor el sitio, He mirado tu post y te comento lo siguiente:, Puedes leer este Articulo Cómo preguntar para que tu pregunta sea mejor recibida, Me parece que a tu POST le falta un Codigo o Ejemplo Minimo Reproducible, Puedes leer este Articulo ejemplo mínimo verificable, También es importante que sepas que preguntas son mal vistas centro de ayuda. Commented el 25 ago. 2023 a las 15:29

1 respuesta 1

0

Si estas seguro que el texto de la base de datos no contiene contenido ni caracteres que pueda ser dañino para la página. Puedes usar la propiedad dangerouslySetInnerHTML.

Tomas el texto de la base de datos, reemplazas o generas el link como quieras (como si fuera html normal) y luego lo muestras con esa propiedad.

const {useState,useEffect} = React;

function App(props) {

  const valorDb = "Este es un texto desde la base de datos con un link al principio y otro link al final";
  //generas el <a> con la palabra "link"
  const data = valorDb.split("link").join('<a href="http://www.google.com">link</a>');
  return (
    <div>
      <p dangerouslySetInnerHTML={{__html: data}}></p>
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render( <App/>)
<script src="https://unpkg.com/react/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
<div id="root"></div>

2
  • perfecto, entiendo lo que hiciste, pero tengo un dilema y es que estoy modularizando, y el texto que viene de la db va a cambiar por cada item, osea que el texto va a ser distinto y asi tambien la url de los links deberia cambiar por cada texto, o palabra clave que quiera utilizar Commented el 26 ago. 2023 a las 18:09
  • Si quieres crea otra pregunta con ese caso especifico y con el código relevante para poder ayudarte
    – Pipe
    Commented el 28 ago. 2023 a las 12:36

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.