JavaScript Wildcard Replace Tutorial: Syntax & Examples

The JavaScript Replace Function

One of the most common programming tasks involves replacing part of a string with different text. Almost every language features a built in function to solve this problem. In JavaScript, that function is replace().

The JavaScript function replace is a built-in function that acts on a string and takes two arguments, the first being a substring or a regular expression to match, and the second being the new text you want replaced in. For example, replacing the word “car” with “auto” in the string “I just went to Catalina and bought a new car”, can be accomplished as follows:

The variable ’newstr’ will now contain the string “I just went to Catalina and bought a new auto”.

What if, instead, we wanted to replace all of the words that began with the letter ‘C’ with auto? We can’t specify that with a string for the first argument of replace. Instead, we will have to use regular expressions.

Wildcards and Regular Expressions

Regular expressions are strings that define patterns which functions like Replace can use to match parts of strings with. They are, in essence, a separate language within the language of Javascript.

Continuing our example from above, if we wanted to write a regular expression that matched any word that started with the letter c, we would write the following: /\bc[A-Za-z0-9]*/g.

The first character, /, signifies that we are starting a regular expression. \b indicates that we want to match the beginning of a word. The c tells the regular expression compiler which letter we are looking for. [A-Za-z0-9]* says to allow zero or more characters or digits after the letter c. The next forward slash signifies the end of the regular expression, and the g indicates that we want to replace all instances that are matched.

Our new code would read as follows:

var newstr = str.replace(/\bc[A-Za-z0-9]*/g, “auto”);

The key thing to take from this is the use of the asterisk, also known as the wildcard operator. The asterisk tells the compiler to match one or more of the proceeding character(s).

Wildcard Operator and replace

Given this knowledge, we can easily write regular expressions that contain wildcard operators that we can pass to JavaScript’s replace function. If we wanted to rename a .JPG image file to “picture.jpg”, for example, we could do the following:

var newstr = str.replace(/\b([A-Za-z]*)\.jpg/g, “picture.jpg”);

Another example of using wildcards in javascript’s replace function is to replace all non-standard characters with a blank space:

var newstr = str.replace(/\W+/g, ’ ‘);

Using the wildcard operator in JavaScript’s replace is both useful and easy. So get out there and start replacing!

Image Credits

The screenshot provided belongs to Steven Sheely and is for educational purposes only.