Use dynamic (variable) string as regex pattern in JavaScript

Question

I want to add a (variable) tag to values with regex, the pattern works fine with PHP but I have troubles implementing it into JavaScript.

The pattern is (value is the variable):

/(?!(?:[^<]+>|[^>]+<\/a>))\b(value)\b/is

I escaped the backslashes:

var str = $("#div").html();
var regex = "/(?!(?:[^<]+>|[^>]+<\\/a>))\\b(" + value + ")\\b/is";
$("#div").html(str.replace(regex, "<a href='#" + value +">" + value + "</a>"));

But this seem not to be right, I logged the pattern and its exactly what it should be. Any ideas?

score 281 · Accepted Answer · edited May 09 '21 at 20:38

To create the regex from a string, you have to use JavaScript's RegExp object.

If you also want to match/replace more than one time, then you must add the g (global match) flag. Here's an example:

var stringToGoIntoTheRegex = "abc";
var regex = new RegExp("#" + stringToGoIntoTheRegex + "#", "g");
// at this point, the line above is the same as: var regex = /#abc#/g;

var input = "Hello this is #abc# some #abc# stuff.";
var output = input.replace(regex, "!!");
alert(output); // Hello this is !! some !! stuff.

JSFiddle demo here.

In the general case, escape the string before using as regex:

Not every string is a valid regex, though: there are some speciall characters, like ( or [. To work around this issue, simply escape the string before turning it into a regex. A utility function for that goes in the sample below:

function escapeRegExp(stringToGoIntoTheRegex) {
    return stringToGoIntoTheRegex.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');
}

var stringToGoIntoTheRegex = escapeRegExp("abc"); // this is the only change from above
var regex = new RegExp("#" + stringToGoIntoTheRegex + "#", "g");
// at this point, the line above is the same as: var regex = /#abc#/g;

var input = "Hello this is #abc# some #abc# stuff.";
var output = input.replace(regex, "!!");
alert(output); // Hello this is !! some !! stuff.

JSFiddle demo here.

Note: the regex in the question uses the s modifier, which didn't exist at the time of the question, but does exist -- a s (dotall) flag/modifier in JavaScript -- today.

this is great and the best example Ive found so far of using a dynamic variable in a regex, thanks! — Eolis, Jul 28 '15 at 17:16
For 2019 _there is_ `s` modifier, see again MDN link in the answer's note. — Nickensoul, Jun 25 '19 at 14:39
let idr = new RegExp(variable + "$"); Table.find({ field: new RegExp(idr, 'i') }) I did like this. Cheers. — Utkarsh, Jul 24 '20 at 11:45
Does it absolutely need `#`? What if I want to pass this string as RegExp pattern ``? — Eugene, Sep 01 '21 at 17:51
@Eugene I don't know what you mean, but no `#` is needed. In the answer the places I used `#` is just as a character that would be replaced, right? — acdcjunior, Sep 01 '21 at 18:41

score 19 · Answer 2 · edited Jun 17 '22 at 11:10

19

If you are trying to use a variable value in the expression, you must use the RegExp "constructor".

var regex = "(?!(?:[^<]+>|[^>]+<\/a>))\b(" + value + ")\b";
new RegExp(regex, "is")

edited Jun 17 '22 at 11:10

Andrii Abramov

10,019
9
74
96

answered Jul 26 '13 at 15:58

mothmonsterman

2,451
3
21
28

score 11 · Answer 3 · answered Oct 09 '19 at 11:21

I found I had to double slash the \b to get it working. For example to remove "1x" words from a string using a variable, I needed to use:

    str = "1x";
    var regex = new RegExp("\\b"+str+"\\b","g"); // same as inv.replace(/\b1x\b/g, "")
    inv=inv.replace(regex, "");

Halcyon · Answer 4 · 2013-07-26T16:05:00.783

9

You don't need the " to define a regular expression so just:

var regex = /(?!(?:[^<]+>|[^>]+<\/a>))\b(value)\b/is; // this is valid syntax

If value is a variable and you want a dynamic regular expression then you can't use this notation; use the alternative notation.

String.replace also accepts strings as input, so you can do "fox".replace("fox", "bear");

Alternative:

var regex = new RegExp("/(?!(?:[^<]+>|[^>]+<\/a>))\b(value)\b/", "is");
var regex = new RegExp("/(?!(?:[^<]+>|[^>]+<\/a>))\b(" + value + ")\b/", "is");
var regex = new RegExp("/(?!(?:[^<]+>|[^>]+<\/a>))\b(.*?)\b/", "is");

Keep in mind that if value contains regular expressions characters like (, [ and ? you will need to escape them.

edited Jul 26 '13 at 16:05

answered Jul 26 '13 at 15:56

Halcyon

57,230
10
89
128

6

The first option would not work unless looking for the string "value" – mothmonsterman Jul 26 '13 at 16:00
@happytimeharry There seems a conflict between the two regexps he posted. – Halcyon Jul 26 '13 at 16:03
@Fritz van Campen it seems that the intent of the pattern, given the example from his javascript, was to use a variable – mothmonsterman Jul 26 '13 at 16:04
same problem here, there seems to be something wrong with the "is" flag: "Uncaught SyntaxError: Invalid flags supplied to RegExp constructor 'is' " – Borstenhorst Jul 26 '13 at 16:10
the flags for the constructor of RegExp need to be seperated. But still the regex is not working. – Borstenhorst Jul 26 '13 at 16:22

score 4 · Answer 5 · answered Mar 03 '16 at 13:22

I found this thread useful - so I thought I would add the answer to my own problem.

I wanted to edit a database configuration file (datastax cassandra) from a node application in javascript and for one of the settings in the file I needed to match on a string and then replace the line following it.

This was my solution.

dse_cassandra_yaml='/etc/dse/cassandra/cassandra.yaml'

// a) find the searchString and grab all text on the following line to it
// b) replace all next line text with a newString supplied to function
// note - leaves searchString text untouched
function replaceStringNextLine(file, searchString, newString) {
fs.readFile(file, 'utf-8', function(err, data){
if (err) throw err;
    // need to use double escape '\\' when putting regex in strings !
    var re = "\\s+(\\-\\s(.*)?)(?:\\s|$)";
    var myRegExp = new RegExp(searchString + re, "g");
    var match = myRegExp.exec(data);
    var replaceThis = match[1];
    var writeString = data.replace(replaceThis, newString);
    fs.writeFile(file, writeString, 'utf-8', function (err) {
    if (err) throw err;
        console.log(file + ' updated');
    });
});
}

searchString = "data_file_directories:"
newString = "- /mnt/cassandra/data"

replaceStringNextLine(dse_cassandra_yaml, searchString, newString );

After running, it will change the existing data directory setting to the new one:

config file before:

data_file_directories:  
   - /var/lib/cassandra/data

config file after:

data_file_directories:  
- /mnt/cassandra/data

score 4 · Answer 6 · answered Aug 11 '20 at 23:46

4

Much easier way: use template literals.

var variable = 'foo'
var expression = `.*${variable}.*`
var re = new RegExp(expression, 'g')
re.test('fdjklsffoodjkslfd') // true
re.test('fdjklsfdjkslfd') // false

answered Aug 11 '20 at 23:46

Alec Mather

742
5
20

score 1 · Answer 7 · answered Jan 17 '21 at 14:35

Using string variable(s) content as part of a more complex composed regex expression (es6|ts)

This example will replace all urls using my-domain.com to my-other-domain (both are variables).

You can do dynamic regexs by combining string values and other regex expressions within a raw string template. Using String.raw will prevent javascript from escaping any character within your string values.

// Strings with some data
const domainStr = 'my-domain.com'
const newDomain = 'my-other-domain.com'

// Make sure your string is regex friendly
// This will replace dots for '\'.
const regexUrl = /\./gm;    
const substr = `\\\.`;
const domain = domainStr.replace(regexUrl, substr);
// domain is a regex friendly string: 'my-domain\.com'
console.log('Regex expresion for domain', domain)

// HERE!!! You can 'assemble a complex regex using string pieces.
const re = new RegExp( String.raw `([\'|\"]https:\/\/)(${domain})(\S+[\'|\"])`, 'gm');

// now I'll use the regex expression groups to replace the domain
const domainSubst = `$1${newDomain}$3`;

// const page contains all the html text
const result = page.replace(re, domainSubst);

note: Don't forget to use regex101.com to create, test and export REGEX code.

score -2 · Answer 8 · answered Apr 12 '19 at 08:23

-2

var string = "Hi welcome to stack overflow"
var toSearch = "stack"

//case insensitive search

var result = string.search(new RegExp(toSearch, "i")) > 0 ? 'Matched' : 'notMatched'

https://jsfiddle.net/9f0mb6Lz/

Hope this helps

answered Apr 12 '19 at 08:23

Leeyung

111
1
2
6

Use dynamic (variable) string as regex pattern in JavaScript

8 Answers8

In the general case, escape the string before using as regex:

Using string variable(s) content as part of a more complex composed regex expression (es6|ts)

Linked

Related