DEV Community

TIL: JavaScript replace() command with callback

Huy Tr. on January 04, 2019

Of course, this is not new, it's already here centuries ago in the document https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Globa...
Read full post
Collapse
 
lexlohr profile image
Alex Lohr •

Yes, replace with a callback is pretty powerful. However, keep in mind that regular expressions are meant to solve regular problems and will easily fail on irregular tasks.

Also, your understanding of the syntax is slightly imcomplete, it actually is:

String.prototype.replace(regExp, callback(
  fullMatch: string,
  ...capturedMatches: string[],
  positionOfFullMatchInString: number,
  inputString: string
))
Enter fullscreen mode Exit fullscreen mode

Captured matches are what you get from using parentheses in your RegExp. The position in the string like all string functions in JS counts UTF-16/-32 chars as multiple characters. Unlike a lot of other methods, the callback is not run in the scope of the object it is called on, so this will default to the global scope unless manually bound.

Collapse
 
zeroxdg profile image
Nguyen Viet Hung • • Edited

Your code is not completely correct. The index variable in the callback is actually the position of the match in the string. So if the task is still matching the 2nd occurrence in the string, your code will fail for this string: "abcabca" and the index for each match will be 0, 3, 8 and not 0, 1, 2. However, we can just add a variable to count the index of each occurrence so overall, nice discovery.

Fun fact: That index variable is also accessible in the regex itself using the lastIndex property.

Collapse
 
huytd profile image
Huy Tr. •

Yeah, that's what I noticed after posted it here, to actually replace the nth match, we can write something like this:

const replaceNth = (input, search, replacement, nth) => {
    let occurrence = 0;
    return input.replace(search, matched => {
        occurrence++;
        if (occurrence === nth) return replacement;
        return matched;
    });
};
Collapse
 
tadman profile image
Scott Tadman • • Edited

Technically a "callback function" is one that's called at a later point in time, like asynchronously, as in "we'll call you back later".

In this case it's just a "function", nothing so exotic. This function is called immediately if/when a substitution is to be performed.

It's easy to understate how powerful a tool this can be though, so good article about using it!

Collapse
 
lysofdev profile image
Esteban Hernández •

Bro, you don't even need JS if you know how to write good regexs. #joke