Question

41

Javascript replace method, replace with $1

rated 0 times [ 44] [ 3] / answers: 1 / hits: 67445 / 14 Years ago, tue, july 13, 2010, 12:00:00

I'm reading Sitepoints 2007 book Simply Javascript and I encountered some code I just can't understand.

It's the following code:

Core.removeClass = function(target, theClass)

{

    var pattern = new RegExp((^| ) + theClass + ( |$));

    target.className = target.className.replace(pattern, $1);

    target.className = target.className.replace(/ $/, );

};

The first call to the replace method is what puzzles me, I don't understand where the $1 value comes from or what it means. I would think that the call should replace the found pattern with .

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

mira

Add To Favorites

Follow

Total Points: 460

Total Questions: 108

Total Answers: 99

Location: American Samoa

Member since Fri, Aug 26, 2022

2 Years ago

mira questions

1 Nodemon: app crashed waiting for file changes before starting... on Windows

Mon, Apr 4, 22, 00:00, 2 Years ago

1 Unhandled promise rejection: ReferenceError Can't find variable

Mon, Feb 14, 22, 00:00, 2 Years ago

1 momentjs datetime format on frontend with angular

Wed, Feb 9, 22, 00:00, 2 Years ago

1 How to check if element exists in DOM in Cypress?

Sun, Mar 28, 21, 00:00, 3 Years ago

1 How do I get the IP of a user in Nuxt's asyncData method?

Sat, Aug 3, 19, 00:00, 5 Years ago

View All

answered 14 Years ago freddiejarretk · Accepted Answer

Each pair of parentheses (...) where the first character is not a ?* is a capturing group, which places its result into $1,$2,$3,etc which can be used in the replacement pattern.

You might also see the same thing as 1,2,3 in other regex engines, (or indeed in the original expression sometimes, for repetition)

These are called backreferences, because they generally refer back to (an earlier) part of in the expression.

(*The ? indicates various forms of special behaviour, including a non-capturing group which is (?:...) and simply groups without capturing.)

In your specific example, the $1 will be the group (^| ) which is position of the start of string (zero-width), or a single space character.

So by replacing the whole expression with that, you're basically removing the variable theClass and potentially a space after it. (The closing expression ( |$) is the inverse - a space or the string end position - and since its value isn't used, could have been non-capturing with (?: |$) instead.)

Hopefully this explains everything ok - let me know if you want any more info.

Also, here's some further reading from the site regular-expressions.info:

Groups and Backreferences

Atomic Grouping (doesn't work in JS, but interesting)

Lookaround groups (partial support in JS regex)