Remove spaces from string in JavaScript

Create a program that removes spaces from string using the javascript function. Let’s create a simple web page to display and perform removal using  HTML, CSS, JS.

Remove spaces from string using split() & join() method

Problem statement

In this, we have to remove the spaces from the string using the javascript function. For that create an HTML file that and use the js function that displays the output.

Solution

  • Create HTML file
  • Add title as Remove spaces in <h1></h1> tag
  • Add one line in bold tag <b></b>  How to remove spaces from a string using javascript
  • Add original string  and new string is in paragraph tag <p></p>
  • In javascript  function removespaces() write original text in originalText =
    “Canada is south of Detroit.”;
  • Use split() method to split a string into multiple substrings using separator  and join() method to join a array of string using seperator (” “)  removedSpacesText =
    originalText.split(” “).join(“”);
  • Use document. queryselector() to return the first element that matches the selector and displays output string document.querySelector(‘.output’).textContent
    = removedSpacesText;

JS code to remove spaces from string using split() join()

<!DOCTYPE html>
<html>
  
<head>
    <title>
        Remove spaces from a string
    </title>
</head>
  
<body style="text-align: center;">
    <h1 style="color: purple;">
        Remove spaces
    </h1>
      
    <b>
        How to remove spaces from a string using JavaScript
    </b>
      
    <p>
        Original string:Canada is south of Detroit
 
        
    </p>
      
    <p>
        New String is: 
        <span class="output"></span>
    </p>
      
    <button onclick="removeSpaces()">
        Remove Spaces
    </button>
      
    <script type="text/javascript">
        function removeSpaces() {
            originalText = 
                "Canada is south of Detroit.";
          
            removedSpacesText = 
                originalText.split(" ").join("");
          
            document.querySelector('.output').textContent
                    = removedSpacesText;
        }
    </script>
</body>
  
</html>

Output

Remove spaces from string using replace() method

Problem statement

In this task create a program that removes spaces from string using the javascript replace() function. For that create an HTML file and use the JS function that displays the result.

Solution 

  • Create HTML file
  • Enter heading as “Remove spaces from a string using javascript “ in <h2></h2> tag
  • Enter string in bold tag <b></b> as “Original string is- “The earth has music for those who listen.”
  • Use button onclick removeSpaces()”
  • For passing content use <span> in paragraph tag <p></p> <p> New Sentence is: <span class=”outputString”></span> </p>
  • Initialize removespaces function const removeSpaces=()
  • Initialize string 1 and use replace () to only remove white spaces  let str2 =
    str1.replace(/ /g, “”); 
  • For output use document.query selector () to return first element within the document that matches the specified selector document.querySelector(‘.outputString’).textContent
    = str2; 

JS code to remove spaces using replace()

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
       Remove spaces from a string using JavaScript
    </title> 
</head> 
  
<body> 
      
    <h2> 
        Remove spaces from a string using JavaScript
    </h2> 
      <b>Original string is- "The earth has music for those who listen."</b>
      
    <p> 
        New Sentence is:  
        <span class="outputString"></span> 
    </p> 
      
    <button onclick="removeSpaces()"> 
        Remove Spaces 
    </button> 
      
    <script type="text/javascript"> 
        const removeSpaces = () => { 
            let str1 =  
                "The earth has music for those who listen."; 
          
            let str2 =  
                str1.replace(/ /g, ""); 
          
            document.querySelector('.outputString').textContent 
                    = str2; 
        } 
    </script> 
</body> 
  
</html>

Output

In this way, we learn how to remove spaces from string using javascript.