Use a variable to match or replace a string in Javascript

August 18, 2013 | 798 views | Comments

If a variable was directly used to match() or replace() a string in JavaScript, it will only be treated as a string, a new Regex object must be created in order for those javascript functions recognize the value of a given variable.

For example

Search for a variable with a value of fox directly to the match() function.

var varContent = "The Quick Brown Fox Jumps Over The Lazy Dog.";
var varString = "fox";
console.log(varContent.match(/varString/i)); //null

The example above will literally search for the word varString and not for the word fox. The word varString was not found on the string to search in (varContent), thus, a null value was returned.

Search for a variable with a value of fox directly to the match() function where the string to search in contains the variable name.

var varContent = "The Quick Brown Fox Jumps Over The Lazy Dog. varString";
var varString = "fox";
console.log(varContent.match(/varString/i));
//["varString", index: 45, input: "The Quick Brown Fox Jumps Over The Lazy Dog. varString"]l

Although a null value was not returned from the example above, the goal of finding the word fox was still not successful, it only gave a false result because instead of searching for the value of the given variable, it searched for the variable name itself.

The following code shows how to use a variable to match() or replace() a string in javascript, these are the correct ways of passing variable values to a regular expression in javascript.

Search for the word fox.

var varContent = "The Quick Brown Fox Jumps Over The Lazy Dog.";
var varString = "fox";
var varRegEx = new RegExp(varString,'i');
console.log(varContent.match(varRegEx));
//["Fox", index: 16, input: "The Quick Brown Fox Jumps Over The Lazy Dog."]

Search for a non-existing word.

var varContent = "The Quick Brown Fox Jumps Over The Lazy Dog.";
var varString = "none";
var varRegEx = new RegExp(varString,'i');
console.log(varContent.match(varRegEx)); //null

Replace the word fox with tiger.

var varContent = "The Quick Brown Fox Jumps Over The Other Lazy Fox And Dog.";
var varString = "fox";
var varRegEx = new RegExp(varString,'i');
console.log(varContent.replace(varRegEx,'tiger'));
//The Quick Brown tiger Jumps Over The Other Lazy Fox And Dog.

Replace all instances of the word fox with lion.

var varContent = "The Quick Brown Fox Jumps Over The Other Lazy Fox And Dog.";
var varString = "fox";
var varRegEx = new RegExp(varString,'gi');
console.log(varContent.replace(varRegEx,'lion'));
//The Quick Brown lion Jumps Over The Other Lazy lion And Dog.

Notes:

  • The i modifier on RegExp(varString,'i'); and match(/varString/i) indicates a case-insensitive search will be performed. That will make fox=fox, and fox=Fox, and fox=fOx, and fox=foX, and fox=FoX, and fox=FOX, and fox=FOx, and fox=fOX.
  • The g modifier on RegExp(varString,'gi'); indicates a global search will be performed. It will still continue to find all the matches after the first one has been found. Without it, it will stop the moment a single match has been found. This modifier can also be used directly on the replace function, replace(/varString/gi).

Related Tutorials


Must Read