Replace all Forward Slashes in a JavaScript String

avatar

Borislav Hadzhiev

Tue Oct 12 20213 min read

banner

Photo by Yanapi Senaud

Replace all Forward Slashes in a String #

To replace all forward slashes in a string:

  1. Call the replaceAll() method, passing it a string containing a forward slash as the first parameter and the replacement string as the second.
  2. The replaceAll method returns a new string with all of the matches replaced.
index.js
const str = 'a/b/c'; const replaced = str.replaceAll('/', '-'); console.log(replaced); // ๐Ÿ‘‰๏ธ a-b-c

We passed the following parameters to the String.replaceAll method:

  1. a substring we want to match in the string, in our case the forward slash character
  2. a replacement for each match

In the example we replace each forward slash with a hyphen, however you can provide any replacement string that suits your use case, e.g. a dot:

index.js
const str = 'a/b/c'; const replaced = str.replaceAll('/', '.'); console.log(replaced); // ๐Ÿ‘‰๏ธ a.b.c

The replaceAll method does not mutate the original string, it returns a new string with all matches replaced. Strings are immutable in JavaScript.

The replaceAll method is not supported in Internet Explorer versions 6-11. If you need to support the browser, use the replace method instead.

To replace all forward slashes in a string:

  1. Call the replace() method, passing it a regular expression that matches all forward slashes as the first parameter and the replacement string as the second.
  2. The replace method will return a new string with all forward slashes replaced.
index.js
// Supported in IE 6-11 const str = 'a/b/c'; const replaced = str.replace(/\//g, ' '); console.log(replaced); // ๐Ÿ‘‰๏ธ a b c

We passed the following parameters to the String.replace method:

  1. a regular expression that matches all forward slashes in the string
  2. a replacement string for each match. In the example we provided a space as the replacement

The regex is quite hard to read, but we basically use a backslash to escape the forward slash.

If you ever need help reading a regular expression, check out this regex cheatsheet from the MDN docs.

We use the g (global) flag, because we want to match all forward slashes in the string and not just the first occurrence.

The replace method does not change the original string, it returns a new string with one or more matches replaced.

The regular expression is quite difficult to read, so here's an alternative approach, which also is supported by Internet Explorer.

To replace all forward slashes in a string:

  1. Call the split() method on the string, passing it a string containing a forward slash.
  2. The split method will return an array containing the divided substrings.
  3. Call the join() method on the array, passing it the replacement string. The join method returns a new string by concatenating the array elements with the provided separator.
index.js
const str = 'a/b/c'; const replaced = str.split('/').join('='); console.log(replaced); // ๐Ÿ‘‰๏ธ a=b=c

The String.split method returns an array containing the substrings, split on the forward slashes.

index.js
const str = 'a/b/c'; const split = str.split('/') console.log(split) // ๐Ÿ‘‰๏ธ ['a', 'b', 'c']

The last step is to use the Array.join method to join the array elements with a provided separator.

In the example we use an equal sign, however you can use any string that suits your use case.

The replaceAll method is quite nicer than any of the alternatives, however if you have to support Internet Explorer, either of the alternatives gets the job done.

Join my newsletter

I'll send you 1 email a week with links to all of the articles I've written that week

Buy Me A Coffee