Replacing spaces with underscores in JavaScript?

Javascript Web Development Front End Technology

Let us learn about "how to replace spaces with underscores in JavaScript". This is a useful technique for formatting strings that contain multiple words, and can be used in many different situations.

We'll look at some other ways of achieving the same result as well as potential pitfalls you should watch out for when working with underscores in your JavaScript code.

JavaScript is a scripting language used to create appealing and engaging web pages for websites. The need to substitute specific letters for certain characters or extra spaces in the text does arise occasionally. The predefined JavaScript methods that can be used to replace space with an underscore are listed below.

replace() method
replaceAll() method
split() method

Using replace() method

The replace() method looks up a value or regular expression in a string. A new string containing the replaced value(s) is the result of the replace() method. The original string is unchanged by the replace() method.

Syntax

Following is the syntax for replace()

replace(pattern, replacement)

Example

In the following example we are running the script along with replace() method to replace spaces with underscore.

<!DOCTYPE html>
<html>
<body>
   <script>
      function spacereplace() {
         var key=$("#sentence").val();
         key=key.replace(/ /g,"_");
         $("#url_key").val(key);
      }
      let sentence = "w e l c o m e t o T P";
      document.write("The Given Sentence=")
      document.write(sentence +"<br>");
      document.write("After replacing the spaces=")
      document.write(sentence.replace(/ /g,"_"));
   </script>
</body>
</html>

When the script is run, it will generate an output that includes the original sentence with spaces, as well as an updated sentence in which, we can see that the sentence was replaced with an underscore due to an event that occurred when the script was run.

Example

Consider the following example, where we are using the replace() method to replace the spaces with underscore.

<!DOCTYPE HTML>
<html>
<body style = "text-align:center;">
   <p id = "tutorial"></p>
   <button onclick = "replacespace()">
      Click here
   </button>
   <p id = "tutorial1"></p>
   <script>
      var re_up = document.getElementById("tutorial");
      var re_down = document.getElementById("tutorial1");
      var str = "T H E B E S T E W A Y L E A R N I N G";
      re_up.innerHTML = str;
      function replacespace() {
         re_down.innerHTML = str.replace(/ /g, "_");
      }
   </script>
</body>
</html>

On running the above script, the web-browser displays the sentence along with a click button on the webpage. When the user clicks the button, the event gets triggered, and it replaces all the spaces in the sentence with underscores and displays it.

Using replaceAll() method

The replaceAll() method returns a new string with a replacement for all pattern matches. A string or a RegExp can be used as the pattern, and a function that is called for each match can be used as the replacement. The initial string is kept intact.

Syntax

Following is the syntax for replaceAll()

replaceAll(pattern, replacement)

Example

In the following example we are using the replaceAll() method which gets triggered and replaces the spaces with underscore.

<!DOCTYPE HTML>
<html>
<body style = "text-align:center;">
   <script>
      function updateKey()
      {
         var key=$("#sentence").val();
         key=key.replaceAll(/ /g,"_");
         $("#url_key").val(key);
      }
      let sentence = "T UTORIALS POINT C OME WITH LOT";
      document.write(sentence.replaceAll(/ /g,"_"));
   </script>
</body>
</html>

When the script gets executed, the event gets triggered and displays the sentence that had spaces replaced with underscores on the webpage.

Using split() method

The split() method divides a String into an ordered list of substrings by searching for the pattern; these substrings are then placed into an array, which is then returned.

Syntax

Following is the syntax for split()

split()
split(separator)
split(separator, limit)

Example

Let’s consider the following example, where we are using the split() method. At first, it will split the string with spaces and then replace the spaces with an underscore.

<!DOCTYPE HTML>
<html>
<body style = "text-align:center;">
   <p id = "tutorial"></p>
   <p id = "tutorial1" ></p>
   <button onclick = "spacereplace()">
      REPLACE
   </button>
   <script>
      var re_up = document.getElementById("tutorial");
      var re_down = document.getElementById("tutorial1");
      var str = "H E L L O , W E L COME";
      re_up.innerHTML = str;
      function spacereplace() {
         re_down.innerHTML = str.split(' ').join('_');
      }
   </script>
</body>
</html>

On running the above script, it will generate an output consisting of a sentence along with a click button. When the user clicks the button, an event gets triggered, replacing all the spaces in the sentences with an underscore on the webpage.