Swap the text within the curly braces with the div element containing the specified text

Question

Swap the text within the curly braces with the div element containing the specified text

I have an input and a textarea. Using Vue, I am currently setting the textarea's text to match what's in the input field. However, now I want to be able to change the color of specific text by typing something like {#123123}text{/#}. At this point, I don't necessarily need the color change functionality, but I'm wondering how to identify the text between {#} and {/#} and wrap it in a div that changes its color.

I'm unsure where to begin with this task. My initial thought is to create a function that searches for {, then identifies the text following it before locating }. Nevertheless, I am uncertain about the best approach to achieving this.

javascript html css vue.js

Answer 1

Answer №1

If you want to achieve this, regex can help you accomplish it. Here's a sample code snippet:

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>

Answer 2

If you want to achieve this, regex can help you accomplish it. Here's a sample code snippet:

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>

Swap the text within the curly braces with the div element containing the specified text

Answer №1

Similar questions

Is there a way for me to access this user's data with just a click?

The content remains constant when navigating within the same view

An issue arose in nodejs when attempting to use redirect, resulting in the error: "Error [ERR_HTTP_HEADERS_SENT]: Unable to modify headers after they have

The value of Yargs.argv is consistently displayed as [object Object]

There seems to be a lack of information appearing on the table

How can I change the attributes of icon().abstract.children[0] in the fontawesome-svg-core api?

Fulfill the specified amounts for each row within a collection of items

Retrieve input value in Angular 8 using only the element's ID

Unable to convert date data for display on D3 line graph

Converting RSS title to HTML format with the help of JavaScript

I am experiencing issues with the customsort function when trying to sort a column of

Utilize React and Jest to handle errors by either mocking window values or resolving them

Is there a way to implement multiple "read more" and "read less" buttons on a single page?

The data is not retrieved in the response

Keeping Vuex state in harmony with Firebase

A self-destructing javascript/jquery function that removes itself after running

Using an external font in JavaFX CSS

Spring application encountering 404 error following nginx request

Adjust the color of error messages in shiny from red

Personalize the build folder within the 'npm start' command