0

I have a string 

var str = "{CPARTY_<BPARTY+_DPARTY}";

I need to find all occurences of below string (find) in main string(str).

 var find = "{CPARTY_<BPARTY+_DPARTY}";

and replace it with below string.

var replace = "<span><div  ng-click='myClick($event)' title='null' data-token='CPARTY_<BPARTY+_DPARTY'  style='display: inline;'>{CPARTY_&lt;BPARTY+_DPARTY}</div></span>";

This doesn't work. That means no replacement done. No exception thrown.

str = str.replace(new RegExp(find, 'g'), replace);

This works.

str = str.replace(find, replace);

I want to use the replace all syntax.I have realized that it has something to do with special characters < and $lt; If I don't have < and $lt; , there is no issue. I know it's something very silly but can't figure it out.

jsFiddle https://jsfiddle.net/848c1as4/9/

user911
  • 1,509
  • 6
  • 26
  • 52
  • Escaping those characters might work – Randy Jan 27 '17 at 22:16
  • The string you pass into `new RegExp` has to be a valid regular expression. What you have right now is actually a valid regex, it just doesn't match your string. As @Randy mentions, escaping characters used in regular expressions is key. – Heretic Monkey Jan 27 '17 at 22:18
  • @Mike McCaughan - I didn't understand when you said that my regex doesn't match my string. Str and find are exactly same. – user911 Jan 27 '17 at 22:19
  • `{` and `}` have special meaning in regular expressions. They don't match the same characters from your string. Same thing with `+` –  Jan 27 '17 at 22:20
  • What @Amy said :), also +, $, ^, ... See [MDN's documentation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp#Special_characters_meaning_in_regular_expressions) for a list. – Heretic Monkey Jan 27 '17 at 22:22
  • 1
    This actually works as replace-all :) `str = str.split(find).join(replace);` – Randy Jan 27 '17 at 22:25
  • Thanks Randy , Mike and Amy :) – user911 Jan 27 '17 at 22:26

2 Answers2

5

Several characters have special meanings in regex. For example, + and (. You'll have to treat them before using it in RegExp, by escaping them.

var str = "{CPARTY_&lt;BPARTY+_DPARTY}";
var find = "{CPARTY_&lt;BPARTY+_DPARTY}";
var safeFind = find.replace(/([\/\,\!\\\^\$\{\}\[\]\(\)\.\*\+\?\|\<\>\-\&])/g,"\\$&");
var replace = "<span><div  ng-click='myClick($event)' title='null' data-token='CPARTY_<BPARTY+_DPARTY'  style='display: inline;'>{CPARTY_&lt;BPARTY+_DPARTY}</div></span>";
str = str.replace(new RegExp(safeFind, 'g'), replace);

(source)

000
  • 26,951
  • 10
  • 71
  • 101
  • I'm stealing this. Thanks! – Pedro Estrada Jan 27 '17 at 22:23
  • Oh my, that regex. No. No no no no. –  Jan 27 '17 at 22:23
  • What do you recommend? – 000 Jan 27 '17 at 22:24
  • Joe - This solved my issues. Thanks! Is it a good practice to use such big regex in production code? Do we have another way to do this? – user911 Jan 27 '17 at 22:29
  • Depends how frequently it is used, and how many search strings exist. If `"{CPARTY_<BPARTY+_DPARTY}"` is one of very few possible search strings, and you know them in advance, you can precompile the regexes and cache them, it'll be fast. If it's user input or you can't control how many exist, then this will indeed be slow. – 000 Jan 27 '17 at 22:30
1

You have to escape the regular expression see how here. Or use a split join combo as mentioned here like this:

str = str.split(find).join(replace);
Community
  • 1
  • 1
ibrahim mahrir
  • 31,174
  • 5
  • 48
  • 73