Special $ References In JavaScript's String.replace() Method

In honor of the 4th Annual Regular Expression Day, I thought I would do some further exploration of Regular Expressions. And, as it so happens, I just learned something new about Javascript regular expressions while reading Javascript: The Good Parts by Douglas Crockford. In the book, Crockford outlines the special characters that are available in the String.replace() method. I had always known about the use of $N to denote captured groups; I was not aware, however, that $&, $`, and $' were also available in the replace() method.

I don't have Javascript: The Good Parts in front of me at the moment. However, I was able to double-check the syntax on Jan Goyvaerts' website (co-author of The Regular Expression Cookbook). On his website, Jan outlines the above replacement references as follows:

$& - Refers to the entire text of the current pattern match.

$` - Refers to the text to the left of the current pattern match.

$' - Refers to the text to the right of the current pattern match.

To see these references in action, I set up the following demo. In this code, our replacement execution is completely non-functional; it is meant only to elucidate the values contained within each replacement reference:

<!DOCTYPE html> <html> <head> <title>Using The $ In JavaScript RegEx Replace</title> <script type="text/javascript"> // Create a test string in which we will match our pattern. var value = "My number is 212-555-1234."; // Creat the pattern to match the phone number. var pattern = new RegExp( "(\\d+)", "g" ); // Replace into the value the special "$"-based matches. var result = value.replace( pattern, "|-- [$&] [$`] [$'] --|" ); // Output the replacement result to see $ functionality. console.log( result ); </script> </head> <body> <!-- Left intentionally blank. --> </body> </html>

As you can see in the above code, we are matching each individual group of digits within the phone number contained within the source text. When we execute the String.replace() method, we're simply replacing the captured number with each of the above $-based values.

When we run the above code, we get the following console output:

My number is |-- [212] [My number is ] [-555-1234.] --|-|-- [555] [My number is 212-] [-1234.] --|-|-- [1234] [My number is 212-555-] [.] --|.

This is a little bit hard to read, so I'm going to break out the replacement portion of each match on its own line:

|-- [212] [My number is ] [-555-1234.] --|

|-- [555] [My number is 212-] [-1234.] --|

|-- [1234] [My number is 212-555-] [.] --|.

As you can see, the $& referred to the entire matched pattern (in our case, that was also the first captured group and could be referred to as $1). The &` referred to the entire text value of the source to the left of the current match. And, the $' referred to the entire text value of the source text to the right of the current match.

I can understand the usefulness of $& in order to refer to the match without having to employ a captured group. But, to be honest, I can't quite see how I would ever use the $` and $' references in a Javascript regular expression replace. In any case, it's always fun to learn more about how something works, even if the value of it is not immediately evident.

Tweet This Provocative thoughts by @BenNadel - Special $ References In JavaScript's String.replace() Method Woot woot — you rock the party that rocks the body!







