How to use a variable in a regular expression to replace-all?

Question

I want to replace multiple occurrences of 'text1' with 'text2', in '#area', here is my code that works just fine:

var replaced = $('#area').html().replace(/text1/g, 'text2');
$('#area').html(replaced);

But imagine the 'text1' is a value of an input box, so:

var search = $('#blah').val();
var replaced = $('#area').html().replace(/search/g, 'text2'); <--- HERE IS THE PROBLEM
$('#area').html(replaced);

As you can see in the second line, I did /search/g but it's not working, how should I put the search value there?

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp — Derek 朕會功夫, Sep 13 '14 at 06:32
@Derek朕會功夫 has nothing to do with my question, please always read the question first :-) — behz4d, Sep 13 '14 at 06:34
Read it more carefully :-). (Hint: There's something to do with the constructor) Also the first result on Google already answered your question: https://www.google.com/search?q=js+regex+with+variable — Derek 朕會功夫, Sep 13 '14 at 06:34
Make sure that titles *accurately* describe the real problem. — user2864740, Sep 13 '14 at 06:39

Arun P Johny · Answer 1 · 2014-09-13T06:39:28.863

1

If search is a variable, you need to use a dynamic regex(RegExp)

if (!RegExp.escape) {
    RegExp.escape = function (s) {
        return value.replace(/[-\/\\^$*+?.()|[\]{}]/g, "\\$&")
    };
}

//then later in your method
var search = $('#blah').val();
var regex = new RegExp(RegExp.escape(search), 'gi');
var replaced = $('#area').html().replace(regex, 'text2');
$('#area').html(replaced);

edited Sep 13 '14 at 06:39

answered Sep 13 '14 at 06:34

Arun P Johny

384,651
66
527
531

what if `text2` is also a variable? – behz4d Sep 13 '14 at 06:37
@behz4d `$('#area').html().replace(regex, replacer);` – Arun P Johny Sep 13 '14 at 06:38
Props for providing a solution that uses escaping. – user2864740 Sep 13 '14 at 06:41

score 1 · Answer 2 · answered Sep 13 '14 at 06:36

1

Or even simpler:

var search = $('#blah').val();
var re = new RegExp(search, 'g');

str = str.replace(re, '');

answered Sep 13 '14 at 06:36

Nicholas Rubin

317
1
4
14

how is it simpler than the below one – Arun P Johny Sep 13 '14 at 06:38
1

@nickrubin - Yours is exactly the same as Arun's answer, except you do not escape special characters first. – Derek 朕會功夫 Sep 13 '14 at 06:41

score 0 · Answer 3 · answered Sep 13 '14 at 06:40

HTML:

Replace String:
<input type="text" id="blah" />
<br/>Text:
<input type="text" id="area" />
<br/>
<button onclick="myReplace()">Replace</button>

JS:

function myReplace() {
    var search = $('#blah').val();
    var regex = new RegExp(search, 'g');
    var replaced = $('#area').val().replace(regex, 'text2'); 
    $('#area').val(replaced);
}

JSFIDDLE

How to use a variable in a regular expression to replace-all?

3 Answers3