Add a backslash before certain characters using regular expressions

My current code is quite messy as I have to manually write separate "replace" functions for each special character.

var str = ":''>";
str.replace("'","\\'").replace(">","\\>");

I am looking for a way to dynamically prepend a backslash to < > * ( ) and ? using regex.

Answer №1

To replace characters using a regex that matches a character set, you can use the following code:

str = str.replace(/([<>*()?])/g, "\\$1");

Check out the DEMO here: http://jsfiddle.net/8ar3Z/

This regex pattern captures any characters inside the square brackets [ ], which are then referenced as $1 in the replacement part and prefixed with \\.


UPDATE:

Following a suggestion from Mr. @T.J.Crowder, there is no need to capture with (). Simply change $1 to $& like this:

str = str.replace(/[<>*()?]/g, "\\$&");

Updated DEMO: http://jsfiddle.net/8ar3Z/1/


Further Reading:

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Retrieve data from mongodb using UTC formatted date as a filter

My MongoDB database contains over 1 million records and I am trying to query records based on a date field that does not fall within the last 30 days. However, the dates are stored in UTCString() format which is causing issues with comparisons. An example ...

Label alignment in one line with responsive checkbox

Could someone assist me with adjusting the alignment of this checkbox when resizing the window for mobile view? The label text is breaking into a new line while the checkbox remains in its original position. How can I make the checkbox align closer to its ...

"Upon refreshing the browser, an Angular map loses its positioning and appears blank

I have implemented a LeafLet map in my Laravel 9 system, which is functioning properly with some exceptions. Here's how it looks like: https://i.stack.imgur.com/kcuVr.jpg The code in the controller (CompetitionsMapController.php) is as follows: ...

Creating a customizable range input for pixel values: a step-by-step guide

I am looking to design a pixel range input. Here is an example: let slider = document.querySelector("input"); slider.addEventListener("change", () => { console.log(slider.value); }); <input type="range" min="5px" max="50px"> However, the r ...

The ng-if directive in AngularJS seems to be malfunctioning

Could someone please help me understand why my "Voted:" checkbox is not controlling the ng-if directive? Strangely enough, the "Keep HTML" checkbox is working fine. <p> <li ng-repeat="x in info"> {{x.name}} Voted: <input type="c ...

Currency unique to a specific culture

Recently, I encountered an issue while working on a website that involved using JavaScript code to format currency values. Here is the snippet of code that was causing the problem: UsdAmount.toLocaleString(siteCulture, {style: 'currency', ...

Setting ng-click on a custom element directive in Angular 1.x: A guide

Within this code, I have assigned ng-click to a custom element directive with the expectation that clicking the rendered text would trigger an alert saying "Worked from directive!" However, the functionality does not seem to be working as intended. Althou ...

Focus on an empty <input> tag with just the type attribute

In what way can React Testing Library be utilized to isolate a blank <input> element that solely possesses a type attribute? For instance, consider an input field that will eventually have attributes added dynamically, much like the surrounding labe ...

What is the method to assign an initial value to React.createRef()?

Scrolling management in my component is handled through a ref that represents the current scroll value. I've chosen to use refs instead of state and setState because using setState while the user is scrolling would result in a choppy and unresponsive ...

Problem with RadioButton click event not triggering

Among my collection of RadioButton elements, there is an onclick event that should trigger. This event, named SecurityCheckedChanged, will display or hide other div containers (populated with RadioButton elements) based on the selected RadioButton. Howeve ...

When you duplicate the React State object and make changes to the copied object, it directly affects

When attempting to duplicate a state object, I noticed that the state object is being modified directly in the code snippet below: @boundMethod private _onClickDeleteAttachment(attachmentName: string): void { console.log("_onClickDeleteAttachment | th ...

Tips on maintaining the numerical value while using JSON.stringify()

Having trouble using the JSON.stringify() method to convert some values into JSON format. The variable amount is a string and I want the final value in JSON format to be a number, but it's not working as expected. Even after applying JSON.stringify(), ...

Error encountered: angular-php API unavailable following the minification process

After setting up a basic angular-php yeoman app to experiment with, I encountered an issue. angular-php Running grunt serve functioned correctly and retrieved data using rest with $http.get('/api/features').... However, upon minifying the proj ...

Apigee Usergrid: Absence of bulk delete feature

Currently, I am utilizing usergrid for storage in a customer project. The data is divided into two collections: carShowrooms and cars. Thus far, everything has been running smoothly. However, there arises a situation where I need to refresh the masterdata ...

Modifying an HTML attribute dynamically in D3 by evaluating its existing value

I'm facing a seemingly simple task, but I can't quite crack it. My web page showcases multiple bar graphs, and I'm aiming to create a button that reveals or conceals certain bars. Specifically, when toggled, I want half of the bars to vanish ...

Unable to synchronize Rijdnael encryption across C# and Javascript/Node platforms

I have encountered an issue while trying to convert a Rijndael encryption function from C# to Node. Despite using the same Key, IV, Mode, and Block Size, I am unable to achieve matching results. What could be causing this discrepancy? C# MRE: using System ...

Typescript Routing Issue - This call does not match any overloads

Need assistance with redirecting to a sign-up page upon button click. Currently encountering a 'no overload matches this call' error in TypeScript. Have tried researching the issue online, but it's quite broad, and being new to Typescript ma ...

Generate JSON dynamically using a foreach loop

I am utilizing the jquery flot charts library to visualize my data. Take a look at this example JSFiddle I created demonstrating how the JSON structure required for the chart should be. The data I am working with is sourced from a MySql stored procedure a ...

What is causing my React Query query function to be activated even though it is supposed to be disabled?

My goal is to dynamically set parameters and select a fetching function within a React Query function (useSpeciesCodes.js). The decision of which API endpoint to fetch from (using either getSpeciesCodesByRegion or getSpeciesCodesByAddress) should be based ...

Issue with AngularJS: $compile function is not functioning as expected

In this particular code snippet, I am encountering an issue with the $compile function. What I am trying to accomplish is taking an item, adding it to the scope, and then compiling it to generate HTML. $http({ method: 'GET', ...