Treat Variables as single entities for deletion in a Text Box Using JavaScript

I have a text box field in my simple HTML/JavaScript-based form where users can insert variables, as shown in the example below:

The name of the product is ${productName}

When the user submits the form, a JavaScript function replaces the variable with its actual product value.

I’d like to implement a feature where, if the user places their cursor to the right of the variable ${productName} and presses the backspace key, the entire variable is deleted in one go, instead of deleting each character one at a time. Essentially, I want the variable to behave as a single, indivisible entity in the text box.

I’m unsure what the technical term for this feature is or how to start researching it. What’s the most efficient way to implement this behaviour?