使用JavaScript中的捕获组从变量创建正则表达式

Question

How can I create a regex from a variable so that it has a capture group that can then be used in a replace() call?

The below is what I have tried so far without success.

 var term = 'test' var r = new RegExp('('+term+')', "ig"); $('#test').html( $('#test').html().replace(r, '<span class="found">'+$1+'</span>') ); // Uncaught ReferenceError: $1 is not defined 

 .found{ background-color:yellow; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <div id="test">This is a test</div> 

Answer 1

I guess this is working as you expect? The main thing is to use $1 inside the replacement string, as <span class="found">$1</span> .

 var term = 'test' var r = new RegExp('('+term+')', "ig"); $('#test').html( $('#test').html().replace(r, '<span class="found">$1</span>') ); 

 .found{ background-color:yellow; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <div id="test">This is a test</div> 

You may also discard the capturing group and use the $& backreference in the string replacement pattern that refers to the whole match and also escape the search string since in case it contains special regex chars , it may fail to match:

 var term = 'test+test' var r = new RegExp(term.replace(/[-\\/\\\\^$*+?.()|[\\]{}]/g, '\\\\$&'), "ig"); $('#test').html( $('#test').html().replace(r, '<span class="found">$&</span>') ); 

 .found{ background-color:yellow; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <div id="test">This is a test+test</div> 

Answer 2

You need to wrap replace expression with a function.

 var term = 'test' var r = new RegExp('('+term+')', "ig"); $('#test').html( $('#test').html().replace(r, function($1){return '<span class="found">'+$1+'</span>'}) ); // Uncaught ReferenceError: $1 is not defined 

 .found{ background-color:yellow; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <div id="test">This is a test</div>