Javascript .replaceAll() is not a function type error

JavascriptTypeerror

Javascript Problem Overview


The documentation page: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replaceAll

let string = ":insertx: :insertx: :inserty: :inserty: :insertz: :insertz:";
let newstring = string.replaceAll(":insertx:", 'hello!');

When I run this, I receive Uncaught TypeError: string.replaceAll is not a function. Maybe I'm misunderstanding what a prototype is, but the function appears to be a string method that is available for use.

I'm using Chrome.

Javascript Solutions


Solution 1 - Javascript

Use replace with a regular expression with the global modifier for better browser support. (Check the browser compatibility table on MDN to see which version of each browser started supporting the replaceAll method.)

let string = ":insertx: :insertx: :inserty: :inserty: :insertz: :insertz:";
let newstring = string.replace(/:insertx:/g, 'hello!');
console.log(newstring);

For a more generic solution, we can escape regular expression metacharacters and use the RegExp constructor. You could also add the function to String.prototype as a polyfill.

(It is necessary to escape the string to replace so that characters that have special meanings in regular expressions will be interpreted literally, e.g. . will refer only to actual dots rather than any character.)

//Taken from https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions
function escapeRegExp(string) {
  return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); // $& means the whole matched string
}
function replaceAll(str, match, replacement){
   return str.replace(new RegExp(escapeRegExp(match), 'g'), ()=>replacement);
}

console.log(replaceAll('a.b.c.d.e', '.', '__'));
console.log(replaceAll('a.b.c.d.e', '.', '$&'));

A specification-compliant shim can be found here.

Solution 2 - Javascript

.replaceAll will be available starting on Chrome 85. The current version is 83.

If you download Google Chrome Canary (which is on version 86), you'll be able to see that your code runs fine. Firefox is on version 78, and since .replaceAll has been available starting version 77, it works there too. It will work on current Safari as well. Microsoft Edge has it as unsupported.

You'll find supported browser versions at the bottom of the article in your question.

Solution 3 - Javascript

If you don't want to upgrade your Chrome nor use reg expressions (since they're less performant), you can also do this:

let string = ":insertx: :insertx: :inserty: :inserty: :insertz: :insertz:";
let newstring = string.split(":insertx:").join('hello!');

And you can, of course, attach to the String prototype if you'd like it everywhere. But since the real replaceAll is more feature filled (supports regex), you'd be instead safer doing:

String.prototype.replaceAllTxt = function replaceAll(search, replace) { return this.split(search).join(replace); }

Solution 4 - Javascript

You can define it yourself easily:

if(typeof String.prototype.replaceAll === "undefined") {
    String.prototype.replaceAll = function(match, replace) {
       return this.replace(new RegExp(match, 'g'), () => replace);
    }
}

And use it:

"fafa".replaceAll("a", "o");
>>> fofo

Solution 5 - Javascript

str.replaceAll function is added in ES2021 ES12, that's why it is not defined in older versions of browsers, and nodejs.

Solution 6 - Javascript

Although a bit off-topic, but I stumbled here for my use case which is not listed so here is for someone like me. I needed to hide a word but if it starts with certain characters i.e. dev. And, there is wild-card character * that helped me do it.

'Fullstack developer'.replace(/dev.*/g, '') // => Fullstack

Note: Notice the dot.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
Questionpyknight202View Question on Stackoverflow
Solution 1 - JavascriptUnmitigatedView Answer on Stackoverflow
Solution 2 - JavascriptMattDiamantView Answer on Stackoverflow
Solution 3 - JavascriptPatrick MascariView Answer on Stackoverflow
Solution 4 - JavascriptAmir FoView Answer on Stackoverflow
Solution 5 - JavascriptMubashir JamaliView Answer on Stackoverflow
Solution 6 - JavascriptLahoriView Answer on Stackoverflow