Issues with the g modifier not functioning in JavaScript Regular Expressions

Check out this code snippet:

var str = "4 shnitzel,5 ducks";
var rgx = new RegExp("[0-9]+","g");
console.log( rgx.exec(str) );

When running this on Chrome and Firefox, the output is ["4"].

Curious why the result isn't ["4","5"]? Let's delve deeper.

Answer №1

exec function will only search for the next match each time it is called. If you want to find all matches, you need to call it multiple times:

If your regular expression contains the "g" flag, you can use the exec method repeatedly to find successive matches in the same string.

To find all matches using exec, you can do the following:

var str = "4 shnitzel,5 ducks",
    re = new RegExp("[0-9]+","g"),
    match, matches = [];
while ((match = re.exec(str)) !== null) {
    matches.push(match[0]);
}

Alternatively, you can simply utilize the match method on the string `str`:

var str = "4 shnitzel,5 ducks",
    re = new RegExp("[0-9]+","g"),
    matches = str.match(re);

Just a tip: Using the RegExp literal syntax /…/ is often more convenient: /[0-9]+/g.

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

What steps can I take to prompt this function to modify the value of my input?

After recently delving into the world of JavaScript, I decided to create a background color generator that randomly changes when a button is clicked. This simple project involves two input fields (color1 & color2) which receive random values upon clicking ...

Chrome failing to import images, but Firefox has no issues with image importing

I'm not very familiar with JavaScript or jQuery, but I was attempting to troubleshoot a functionality that was previously created. The issue is that it works fine on Firefox, but it fails on Chrome. I am importing an image and then cropping the necess ...

Error encountered: Unexpected token when defining inline style in React

When attempting to prevent scrolling on the page by using style='overflow-y: auto;': render() { return ( <div style={{overflow-y: auto}}> <div>{this.props.title}</div> <div>{this.props.children}& ...

Differences between Arrow function and regular function when used in Array.map()

While working on some JS challenges, I observed that when using arrow functions, the result is as expected. However, when I try the same code with a regular function, it doesn't work. Can someone please explain the difference or point out if there is ...

Develop a custom jQuery function

Seeking guidance on creating a customizable jQuery function that accepts parameters by name for easier handling. Rather than passing variables in a specific order like this: myFunction("My function name",true,false); I prefer to set parameters using an ...

Combining the redux toolkit function createAsyncThunk with Angular's HttpClient by leveraging the ApiService

Currently, I am working on incorporating @reduxjs/toolkit into an Angular project. Is there a way to pass an Angular service as a parameter to the callback of createAsyncThunk instead of utilizing fetch directly? I referenced the documentation for an exa ...

identify when the React component has reached the bottom of the element by reading the

Is there a way to access the scroll handler's event without being able to access offsetTop, scrollTop, etc? class App extends React.Component { handleScroll = e => { console.log(e.target.scrollTop); }; componentDidMo ...

The d3 hierarchy possesses the capability to compute the average values of child nodes

Looking for a solution with d3 visualization that involves averaging up the value of score on the lowest nodes and dynamically adding that average to the parent node above. It seems like there isn't an easy method in d3 for this task. The desired outc ...

Is it possible to modify the background-color of a minified gallery using CSS in jQuery?

As I was brainstorming ideas for my website, I thought about the possibility of creating a small preview gallery for background images. The goal would be to allow users to hover over an image in the gallery and have the CSS background image of the site cha ...

Access a PDF document through an AJAX POST request

I have an ajax POST method that looks like this: $.ajax({ type: 'POST', url: rootUrl("Home/PrintInvoice/12"), success: function (result) { $("#TestInvoicePrint").empty(); $("#TestInvoicePrint").html(result); w ...

JavaScript adding arrays to JSON files

At this point, I feel like I have no other option. Everything appears to be correct from my perspective. However, nothing seems to be working. I decided to create a small food app for myself to keep track of what I'm eating. I set up a JSON file name ...

Implementing AJAX mysqli interaction in PHP following the MVC design pattern

Today I'm encountering yet another AJAX-related error. I am in the process of developing a user registration system using AJAX and PHP, following MVC architecture. Previously, I successfully built a login system without AJAX that functions flawlessl ...

Utilizing a nested interface in Typescript allows for creating more complex and

My current interface is structured like this: export interface Foo { data?: Foo; bar?: boolean; } Depending on the scenario, data is used as foo.data.bar or foo.bar. However, when implementing the above interface, I encounter the error message: Prope ...

Guide to indicating the chosen filter in React using Material UI

I'm currently working on a blog that includes a filter feature. The filtering functionality is working perfectly, but I am trying to specify which filter option is currently selected. Here is the code snippet: {cardCategories.map((cat) => { retu ...

Encountering a RuntimeError during the integration of Angular Js in Rails with ExecJS

Currently, I'm working on integrating Angular Js into a Rails Project and I've been following the tutorial provided at . However, after completing all the steps, I encountered the following error: https://i.sstatic.net/ehYCb.png I've searc ...

Conceal the item and reveal it upon clicking

There are three div boxes included in a rotator script. However, when clicking on the right button, all three boxes appear overlapping each other instead of showing one at a time. How can I make it so that only one box is shown and the others appear upon c ...

Display one component multiple times across various webpages with unique text each time

I'm currently exploring React and attempting to render a single component in various HTML files within an existing project, each with different text content. Here's what I have in mind: class CtaSection extends React.Component{ render(){ ...

Retrieving Information from Website Components in JavaFX Web View

I am currently developing a Java FX program that loads a folder containing HTML/CSS/JS files with 3 different websites. While the websites are displaying correctly in the webview, I am looking for a way to capture user interactions, such as checkbox selec ...

The lack of definition for the props value poses an issue in React.js Hooks

I'm currently developing a notepad web application that utilizes React Hooks for managing state variables. In order to fetch data from an API, I am using the axios library. The retrieved data consists of objects with fields such as _id, title, status, ...

What is preventing me from assigning a value of false to my JavaScript variable?

I'm encountering an issue where the articleExists variable is not being set to true on line 6, even though I have used console logs to double check that the if statement containing it is functioning properly. app.post("/articles", function(req, res) ...