Replace spaces with underscores in JavaScript

This tutorial will show you how to replace spaces with underscores in Javascript by using various methods. Below are the methods that I will use to replace spaces with underscores.

  • replaceAll() method: This method replaces all the matches of patterns with a replacement and returns a new string. In this method, the pattern can be anyone between a string or a RegExp. You can use either a string or a function as a replacement. The original string remains unchanged.
  • replace() method: This method replaces one, some, or all matches of patterns with a replacement and returns a new string. In this method, the pattern can be anyone between a string or a RegExp. You can use either a string or a function as a replacement. The first occurrence of the pattern will be replaced if it is a string.  The original string remains unchanged.
  • split() and join() method: The split() method in JavaScript separates the string in the array from the sub-strings, places those sub-strings in an array, and returns the new array. The original string remains unchanged.
    The join() method creates a new string from an array by concatenating all the elements from that array. By default, it uses a comma as a separator but you can specify what separator you want to be added between the items.

 

By using the replaceAll() method

This method takes two parameters, the first one is pattern that needs to be replaced. The pattern can be either a string or a RegExp. The second one is replacement the pattern will be replaced by this replacement. It can either be a string or a function.

Syntex of the replaceAll() method:

str.replaceAll(pattern, replacement)

str is the original string that you are working with. The replaceAll() method will be applied to this string.

const str = 'Welcome to codespeedy';
const strUnderscores= str.replaceAll(' ', '_');
console.log(strUnderscores);

str.replaceAll(' ', '_'); to replace all the white spaces of the string with underscores. This method returns a new string by replacing all the white spaces.

Output:

Welcome_to_codespeedy
  • The global (g) flag must be set if the pattern is a regex or you will get a TypeError.

By using the replace() method

This method also takes two parameters, the first one is pattern that needs to be replaced. The pattern can be either a string or a RegExp. The second one is replacement the pattern will be replaced by this replacement. It can either be a string or a function.

Syntex of the replace() method:

str.replace(pattern, replacement)

str is the original string that you are working with. The replaceAll() method will be applied to this string.

const str = 'Welcome to Codespeedy';
const strUnderscores = str.replace(/ /g,"_");
console.log(strUnderscores);

In the above program, I usedreplace() method, in the first parameter I passed a regular expression and in the second parameter, I passed a replacer string.

The regular expression “//” will match only the first whitespace. That’s why to make the regex match all the whitespace the 'g' (global) flag has been added to the regular expression.

Output:

Welcome_to_codespeedy
  • If you remove the 'g' flag then only the first whitespace of the string will be replaced with the underscore.

 

By using the split() and join() method

 The split() method separates the string in the array from the sub-strings and places those sub-strings in an array. With the join() method, we can replace any character or whitespace from a string with a specified character.

var str = 'Welcome to codespeedy';
var replaced = str.split(' ').join('_');
console.log(replaced);

In the above program, we can put any substring that we want to replace in split() method parameter (We have used whitespace in our example). In join() method parameter, we have to put the substring that will be taking place instead of the substring we have passed through the split method(We have used underscore here).

Thus our output string will be like this:

Welcome_to_codespeedy

Leave a Reply

Your email address will not be published. Required fields are marked *