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

What is the best way to add the SO-style <kbd> effect to my presentation made with HTML?

Encountering a "Unable to use import statement outside a module" issue when trying to import react-hook-mousetrap within a Next.js project

Exploring the Evolution of jsAjaxForm from jQuery Version 2.1.3 to Version 3.2.1

Toggle the Material UI checkbox based on the value received from an object input

Toggle draggable grid in jQuery

When attempting to pass data to a modal, an error occurs due to props being undefined. This results in a TypeError with the message "Cannot

Guide to retrieving objects in React.js

Comparing form submission with a button click to pass data using Ajax - success in one method but failure in the other

Manipulate JQuery plug-in properties within an AJAX request using MVC

Improving Vue Component on Navigation

Verify and generate a notification if the value is null

Failed to retrieve the requested item using fetch, encountering a NetworkError

What is the method for retrieving an attribute's value from an object that does not have key-value pairs?

Still having trouble getting @font-face to work with Firefox and htaccess

Firefox not rendering responsive YouTube embed properly

The basic evaluation of jQuery elements does not result in a comparison

Why do I keep receiving the error message "Cannot set property of undefined"?

A new module is unable to load Angular Material

Is your prop callback failing to return a value?

Halt hovering effect after a set duration using CSS or Vanilla JavaScript