Change CSS automatically when typing

Question

I need to change the CSS of a string that is inside keys automatically.

Follow an example:

Olá {{AMIGO}}.

Whenever I typed this {{AMIGO}}, I wanted it to be button-shaped and without the keys.

Someone knows how to do?

Answer 1

This type of functionality is complex. Mainly because of the position of the marker/cursor... If you are writing in the middle of a sentence and change the content (by changing the {{AMIGO}} it is complex to put the cursor back in the expected place.

But leaving that problem aside, what you’re looking for in the question can be done like this:

(or using .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>