-1

Preciso alterar o CSS de uma string que esteja dentro de chaves automaticamente.

Segue um exemplo:

Olá {{AMIGO}}.

Sempre que eu digitasse esse {{AMIGO}}, eu queria que ele ficasse em formato de botão e sem as chaves.

Alguém sabe como fazer?

1 Resposta 1

3

Esse tipo de funcionalidade é complexo. Principalmente por causa da posição do marcador/cursor... Se estiveres a escrever no meio de uma frase e mudares o conteúdo (trocando o {{AMIGO}} é complexo voltar a colocar o cursor no sitio esperado.

Mas deixando esse problema de parte, o que procuras na pergunta pode ser feito assim:

(ou usando .replace)

const editor = document.getElementById('editor');
const tag = '{{AMIGO}}';
editor.addEventListener('keyup', () => {
  const html = editor.innerHTML;
  if (html.includes(tag)) {
    editor.innerHTML = html
      .split(tag)
      .join('<button>amigo</button>');
  }
});
#editor {
  border: solid 1px black;
}
<div contenteditable id="editor"></div>

2
  • Um ajuste que pode ser interessante, mover o ponteiro para o final depois do innerHTML, porque caso contrário o ponteiro volta ao começo e durante uma digitação isso se torna um incomodo.
    – Syzoth
    22/07/2019 às 7:08
  • Muito bom! Mas pode ser algo ainda mais básico, inserir apenas uma formatação CSS ao inves de transformar em um botão e colocar o ponteiro pro final da string, tem como fazer essa opção ai pra mim?
    – Gustavo
    22/07/2019 às 7:17

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .