jQuery replace character with another

Question

Let's say I have:

<h1>Win $50<h1>

I need to change the $ sign to € with jQuery
So I can do it like that:

$('h1').text( $('h1').text().replace('$', '€') );

But what if I have something like that:

<h1>Win $50 and Get $100</h1>

It only change the first one, How can I change it all?

score 9 · Accepted Answer · answered Apr 02 '15 at 12:33

9

Use regexp with g flag

$('h1').text( $('h1').text().replace(/\$/g, '€') );

answered Apr 02 '15 at 12:33

RafH

4,504
2
23
23

I answered the same thing 2 minutes earlier. – Jeremy Thille Apr 02 '15 at 12:36
how can one use this with a variable, let's say the search in replace is user input? – Karue Benson Karue Oct 02 '21 at 11:49

Jeremy Thille · Answer 2 · 2018-10-31T13:26:43.967

5

With a regex.

txt = $('h1').text().replace(/\$/g, '€')
$('h1').text(txt);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Win $50 and get $100</h1>

g stands for "global" (all instances)

As RafH said, $ is a special character in regex, so it needs to be escaped with \.

edited Oct 31 '18 at 13:26

answered Apr 02 '15 at 12:31

Jeremy Thille

26,047
12
43
63

$ needs to be escaped – RafH Apr 02 '15 at 12:35

score 2 · Answer 3 · edited May 23 '17 at 12:09

Here's a helper function that's a part of my utility library that I add into every piece of code that I write. Feel free to use it any way you like.

String.prototype.replaceAll = function (stringFind, stringReplace) {
    var ex = new RegExp(stringFind.replace(/([.*+?^=!:${}()|\[\]\/\\])/g, "\\$1"), "g");
    return this.replace(ex, stringReplace);
};

It adds a replaceAll function to all strings so you don't have to constantly use RegEx throughout your code.

You can use it like this

str.replaceAll("$", "€");

Here's an example:

String.prototype.replaceAll = function (stringFind, stringReplace) {
  var ex = new RegExp(stringFind.replace(/([.*+?^=!:${}()|\[\]\/\\])/g, "\\$1"), "g");
  return this.replace(ex, stringReplace);
};

var str = "Win $50 and Get $100";

document.body.innerHTML = str.replaceAll("$", "€");

EDIT Test cases per comment below:

String.prototype.replaceAll = function (stringFind, stringReplace) {
  var ex = new RegExp(stringFind.replace(/([.*+?^=!:${}()|\[\]\/\\])/g, "\\$1"), "g");
  return this.replace(ex, stringReplace);
};

var str = "test test abc test abc $%& test $%& $%&. test. abc $%& . .";
document.body.innerHTML = str  + "<br />";
document.body.innerHTML += str.replaceAll(".", "") + "<br />";
document.body.innerHTML += str.replaceAll("%&", "") + "<br />";
document.body.innerHTML += str.replaceAll("test", "") + "<br />";
document.body.innerHTML += str.replaceAll("a-z", "") + "<br />";

Update

Per the comments from Danilo below (Thank you!), the original function would not allow for certain special characters, and would misbehave if a text range was entered into the replaceAll() function. In my own code, I had not come across these cases as of yet.

Per this answer, I have updated my function so that it now escapes the RegEx to be more efficient in the provided test case scenarios.

you are using square brackets withing your regexp: if stringFind has more than one charactore or if stringFind = "." you will get unexpected results. — Danilo, Apr 02 '15 at 12:44
@Danilo - Please see my edit with test cases and explain your point in greater detail. This function works just fine with "." or multiple characters as shown in the snippet above. — Howard Renollet, Apr 02 '15 at 13:15
you are indeed right: the dot gets handled correctly, however words no not, try adding this to your example: document.body.innerHTML += str.replaceAll("test", "trial") + "
"; document.body.innerHTML += str.replaceAll("a-z", "someText") + "
"; — Danilo, Apr 02 '15 at 14:04
Thanks @Danilo - I appreciate you pointing this out. I have updated my answer. — Howard Renollet, Apr 02 '15 at 17:36

jQuery replace character with another

3 Answers3