Using JavaScript to utilize a variable containing a .match method with Regex Expression

Question

Using JavaScript to utilize a variable containing a .match method with Regex Expression

Recently, I started delving into the world of regex with the aim of incorporating variables in my matches.

Imagine I have a string that reads "Total: $168" My goal is to extract just the numerical value; 168.

This is what I currently have:

totalCost = totalCost.match(/[^Total: $]*$/);

When I display the result, it indeed shows 168. The functionality is working perfectly as intended.

Now, I want to take it a step further and make "Total: $" a variable so that I can easily adjust it for modularity.

In order to achieve this, I initialized:

 var stringToSearch = 'Total: $';

and then altered the code like this:

 totalCost = totalCost.match(/[^stringToSearch]*$/);

Upon logging the results:

 console.log(totalCost+" || "+stringToSearch );

The output is:

$168 || Total: $

I'm puzzled as to why introducing this variable has caused such unexpected behavior?

javascript regex variables

Answer 1

Answer №1

It amazes me that your regular expression actually found "120" by pure chance!

The pattern [^Total: $]*$ instructs the regex engine to search for everything except the characters 'T', 'o', 't', 'a', 'l', ' ', or '$' as many times as possible until the end of the line ('$' is not interpreted as a literal dollar sign in this context). What got matched? Only the numbers '1', '2', and '0' that didn't fall within the specified character set.

Your goal was to extract the number following the string 'Total: $':

var totalCost = 'Total: $168',
    matches = totalCost.match(/^Total: \$([\d\.]*)/),
    totalCostNum = matches ? parseFloat(matches[1]) : 0;

To achieve this, you must first escape your target string so it can be literally matched, then construct your regex using new RegExp:

var totalCost = 'Total: $168',
    stringToMatch = 'Total: $',
    escapedString = stringToMatch.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&'),
    regexForString = new RegExp(escapedString + /([\d\.]*)/.source),
    matches = totalCost.match(regexForString),
    totalCostNum = matches ? parseFloat(matches[1]) : 0;

Answer 2

It amazes me that your regular expression actually found "120" by pure chance!

The pattern [^Total: $]*$ instructs the regex engine to search for everything except the characters 'T', 'o', 't', 'a', 'l', ' ', or '$' as many times as possible until the end of the line ('$' is not interpreted as a literal dollar sign in this context). What got matched? Only the numbers '1', '2', and '0' that didn't fall within the specified character set.

Your goal was to extract the number following the string 'Total: $':

var totalCost = 'Total: $168',
    matches = totalCost.match(/^Total: \$([\d\.]*)/),
    totalCostNum = matches ? parseFloat(matches[1]) : 0;

To achieve this, you must first escape your target string so it can be literally matched, then construct your regex using new RegExp:

var totalCost = 'Total: $168',
    stringToMatch = 'Total: $',
    escapedString = stringToMatch.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&'),
    regexForString = new RegExp(escapedString + /([\d\.]*)/.source),
    matches = totalCost.match(regexForString),
    totalCostNum = matches ? parseFloat(matches[1]) : 0;

Answer 3

Answer №2

Seems like incorporating a variable into a JavaScript regex can be tricky as seen here. The example /[^stringToSearch]*$/ is used to match any substring that ends with characters not found in the literal string "stringToSearch". To make it more adaptable, you can utilize the RegExp constructor:

totalCost = totalCost.match(new RegExp("[^" + stringToSearch + "]*$"));

Answer 4

Seems like incorporating a variable into a JavaScript regex can be tricky as seen here. The example /[^stringToSearch]*$/ is used to match any substring that ends with characters not found in the literal string "stringToSearch". To make it more adaptable, you can utilize the RegExp constructor:

totalCost = totalCost.match(new RegExp("[^" + stringToSearch + "]*$"));

Answer 5

Answer №3

If you're looking to transform your regular expression into a variable that can be applied to various inputs, consider this approach:

let regExp = /^Total: \$(\d+)/;
regExp.exec('Total: $168');
// [ 'Total: $168', '168', index: 0, input: 'Total: $168' ]
regExp.exec('Total: $123');
// [ 'Total: $123', '123', index: 0, input: 'Total: $123' ]

I've made adjustments to the regex in my example due to issues with its functionality not aligning with your expectations.

Answer 6

If you're looking to transform your regular expression into a variable that can be applied to various inputs, consider this approach:

let regExp = /^Total: \$(\d+)/;
regExp.exec('Total: $168');
// [ 'Total: $168', '168', index: 0, input: 'Total: $168' ]
regExp.exec('Total: $123');
// [ 'Total: $123', '123', index: 0, input: 'Total: $123' ]

I've made adjustments to the regex in my example due to issues with its functionality not aligning with your expectations.

Using JavaScript to utilize a variable containing a .match method with Regex Expression

Answer №1

Answer №2

Answer №3

Similar questions

Currently, I am creating a regular expression to manage a specific task, but I have hit a roadblock in

Encountered an error while trying to download a PDF document in React

Utilize the jQuery function as a callback argument

In Google Chrome, the edges of hexagons appear jagged and not smooth

Iterate through JSON objects

Scheduling casperjs on Heroku for automated tasks

Zingchart encounters issues when attempting to plot a CSV file containing over 10 columns

Set up a JavaScript function that triggers an alert if two numbers are determined to be equal

What is the best way to output multiple Div elements using Jquery or Javascript?

Facing an issue with Heroku deployment where a React/Express app is encountering a 'Failed to load resource' error in the console while requesting the chunk.js files

hosting a NextJS development server on the local network

Using PHP, JavaScript, and Bootstrap to display success or error messages for form fields through AJAX

Issues with the Jquery feedback plugin's functionality are currently preventing it

Steps for organizing a list based on the number of clicks

How to efficiently retrieve a form's data from multiple forms with identical ids in JavaScript

Tips for importing an external JavaScript file and accessing its data within a ReactJS project?

Is it recommended to run JavaScript functions obtained from REST APIs?

Tips on showing content while filtering is taking longer with AngularJS

Utilizing the output from a console.log in a webpage

Attempting to incorporate Google charts into a div using jQuery's load function