Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

136
Visualizações
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 Respostas
Responde à pergunta

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 Relatório

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 Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda