Replace text between curly brackets to div with this text

Issue

I have input, and textarea. I use vue to set textarea's text to what's in input. I want to be able to write something like {#123123}text{/#} to change text's color. Right now, i don't really need any color, i just want to know how to find text between {#} and {/#} and put it div which changes color.

I don't even know where to start, probably i should use some function to find {, then check text after it, after that find }, but I'm really not sure.

Solution

You can use regex to do that, here is an example:

const input = document.querySelector('input');
const textArea = document.querySelector('textArea');

input.oninput = process;

function process() {
  const match = input.value.match(/{(#[^}]+)}([^{]+){\/#}/);
  if (match) {
    const [, color, text] = match;
    textArea.value = text;
    textArea.style.color = color;
  }
}

process();

<input type="text" value="{#a83232}text{/#}" />
</br>
</br>
<textarea></textarea>

Answered By - Titus