home icon

Clique aqui para editar JSX... ou

Extraindo e Substituindo Texto em JSX

Experimental: Isso pode não lidar bem com todos os casos.

É principalmente adequado para extrair texto de componentes JSX que contêm texto estático. Se o conteúdo do texto for dinâmico (usando chaves {}), pode não ser tratado corretamente.


Esta ferramenta se concentra em extrair texto encontrado dentro de tags JSX, gerando um array composto por essas strings extraídas. Depois, permite que você substitua o texto atual no JSX pelas strings deste array.

Você pode usar essa funcionalidade de forma conveniente para uma variedade de aplicações, incluindo testes de UI/UX, suporte a múltiplas línguas e localização, otimização para SEO, realização de avaliações de acessibilidade e criação de documentação ou comentários para seu código.


Casos de Uso

  • Testes de UI / UX
  • Suporte Multilíngue e Localização
  • Sistemas de Gestão de Conteúdo (CMS)
  • Otimização para SEO
  • Verificações de Acessibilidade
  • Geração de Documentação / Comentários de Código

Instruções de Uso

  1. Por favor, insira a tag JSX contendo as strings que você deseja extrair no campo de entrada.
  2. Clique no botão de extração na parte inferior da tela.
    • Você pode escolher se deseja extrair apenas ou realizar tanto a extração quanto a substituição usando as opções de botão ao lado do botão de extração.
    • Para a opção de extrair e substituir, você pode especificar o nome do array que conterá os textos substituídos no campo de entrada na parte inferior da área de entrada. Ao chamar esse array em seu código, use o mesmo nome de variável, e ele será substituído de acordo, incluindo as chaves {}.
  3. Verifique o campo de saída para o array / JSX e copie conforme necessário usando o botão de copiar para uso gratuito.

Exemplo de Uso

Input JSX Tag:

<div>
  <Button onClick={onPlayMovie}>
  Play Movie
  </Button>
  <Button onClick={onUploadImage}>
  Upload Image
  </Button>
</div>

Output Array Name:

array

Output Array:

["Play Movie", "Upload Image"]

Output JSX:

<div>
  <Button onClick={onPlayMovie}>
  {array[0]}
  </Button>
  <Button onClick={onUploadImage}>
  {array[1]}
  </Button>
</div>