Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

208
Vistas
How to wrap a part of text fetched from array of object in a span tag?

Given a json object as below:

const data = [
  {
    id: "text1",
    text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sollicitudin odio a luctus ornare. Pellentesque nisl tis tellus nec, dapibus turpis. In hac habitasse platea vitae.",
  },
];

If I want to include part of text fetched inside a <span> tag such as:

<p>Lorem ipsum <span>dolor sit amet</span>. </p>

How do I do this?

about 4 years ago · Juan Pablo Isaza
2 Respuestas
Responde la pregunta

0

Based on your comment, I imagine that you know which text should be put under the span

const data = [
  {
    id: "text1",
    text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sollicitudin odio a luctus ornare. Pellentesque nisl tis tellus nec, dapibus turpis. In hac habitasse platea vitae.",
  },
];

const textToSpan = 'dolor sit amet';

In this case you can split your string and render with something like this:

const aText = data.text.split(textToSpan);

const aTextRender = aText.reduce((result, t) => {
  if (result.length) {
    result.push(<span>{textToSpan}<span>);
  }
  result.push(t);
  return result;
}, [])

return (
  <p>
    {aTextRender}
  <p>
);

Code not tested though :o

about 4 years ago · Juan Pablo Isaza Denunciar

0

This should do your work!

    data[0].text.replace("dolor sit amet", "<span>dolor sit amet</span>");
about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda