Use replace() with callback function

Last updated on December 17, 2023

As a web developer, I am sure that we usually use replace method to transform some string content. However, we probably do not know how to use the replace with a callback function and understand what it is. So now, in this article, I am going to share with you guys some real samples to apply it.

Quick view

• Use replace as usual
• Use replace with callback()
• Real example

Use replace() as usual

We usually use replace() method like this

Replace with specific keyword:

let str = "JS - Use replace() wth {method_name} function";
str = str.replace('{method_name}', 'callback');
console.log(str);

// expected output:
JS - Use replace() wth callback function

Or replace with a regex

let str = "JS - Use replace function with callback function";
const regex = /function/i;
str = str.replace(regex, 'method');
console.log(str);

// expected output:
JS - Use replace method with callback function.

Hey wait, you are thinking that I had a mistake on the expected output right? No, I did not. The replace function just only replaces the first met keyword. If you want to replace all the ‘functions’ on the example string, you should use replaceAll() method.

Use replace() with callback()

Using replace function will have the following syntax:

String.prototype.replace(RegExp, function(matched, index, original) {
    ...
})

As you can see, the second parameter is a group of “matched, index, original” and it will be returned as your handler. So, why do I have 3 parameters of callback function like that? You can read in Replace() document at Specifying a function as a parameter.

Real example replace() with callback

const string = "Hi {name}, I am glad to show {name} my experience. Would {name} please donate for me at https://ko-fi.com/{name}.";

On one hand, I have the keyword `{name}` in my string and I would like to replace all {name} with my expected value. However, with normal use, replace just only replace first matched with the keyword {name}. So it will output my string as:

Hi Kingsley, I am glad to show {name} my experience. Would {name} please donate for me at https://ko-fi.com/{name}.

All other keywords {name} are still there, so in this case, we will use replaceAll() to replace all, and my output will be:

const string = "Hi {name}, I am glad to show {name} my experience. Would {name} please donate for me at https://ko-fi.com/{name}.";

const newStr2 = string.replaceAll(/{name}/g, 'Kingsley');

// Hi Kingsley, I am glad to show Kingsley my experience. Would Kingsley please donate for me at https://ko-fi.com/Kingsley."

No, I do not want this. On another hand, I want to customize every matched position with my specific value. In this case, I do this:

const string = "Hi {name}, I am glad to show {name} my experience. Would {name} please donate for me at https://ko-fi.com/{name}.";

const newStr = string.replace(/{name}/g, function(match, startIndex, wholeString) {
  console.log(startIndex);
  if(startIndex == 3){
    return 'Kingsley';
  } else if(startIndex == 106) {
    return 'tommydo';
  } 
  else {
    return 'you';
  }
});

console.log(newStr);

// Output:
3
29
57
106

"Hi Kingsley, I am glad to show you my experience. Would you please donate for me at https://ko-fi.com/tommydo."

So now, I can see the index position of each keyword in the whole string, I could customize each value for each position as I want.

Good luck.

Thank you for reading. If you feel happy and think that my post is helpful to you. Kindly donate for me at https://ko-fi.com/tommydo.

Cheers.