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

141
Vistas
Replace strings to tag in react

I am trying to replace :: and ;; to

const text = 'Welcome :: my ;;'.replace('::', <Strong>to</Strong>).replace(';;', <Strong>world</Strong>);

I am getting this Welcome [object Object] my [object Object].

Expected response Welcome **to** my **world**.

Can anyone please help me on that.


Updated question

There will be random text like this:

  1. Welcome :: my ;;
  2. Welcome ;; my ::
  3. Hello ::

And replace :: with dynamic value suppose to only and ;; with dynamic value world only.

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

0

JSX elements are syntax sugar for React DOM elements, which are objects. A string on it's own won't carry information about things such as font size or weight, so it may be best to represent the whole thing by JSX. I think something along these lines would do it:

const text = 'Welcome :: my ;;';
const myWorld = (
  <span>
    {text.split(' ').map((word, index) => {
      const space = index == 0 ? '' : ' ';
      if (word == '::') {
        return (<strong key={index}>{space + "to"}</strong>);
      } else if (word == ';;') {
        return (<strong key={index}>{space + "world"}</strong>);
      }

      return (<span key={index}>{space + word}</span>);
    }}
  </span>
);

If you need the replacements to be dynamic, you can create a function for this:

// Example `replacements` object:
// { 
//   '::': 'to',
//   ';;': 'world',
// }

function replaceWithEmphasis(text, replacements) {
  const words = text.split(' ');
  
  return (
    <span> 
      {
        words.map((word, index) => {
          const replaced = replacements[word];

          // Preserve spaces between words
          const space = index == 0 ? '' : ' ';

          if (replaced != null) {
            return <strong key={index}>{space + replaced}</strong>;
          } else {
            return <span key={index}>{space + word}</span>;
          }
        })
      }
    </span>
  );
}
about 4 years ago · Juan Pablo Isaza Denunciar

0

You can do it like this

const text = 'Welcome :: my ;;'.replace('::', '<strong>to</strong>').replace(';;', '<strong>world</strong>')

and then display it using dangerouslySetInnerHTML

render() {
    return (
      <div dangerouslySetInnerHTML={{ __html: text  }} />
    );
  }
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