How to Remove Substring From String in JavaScript

Kirill Ibrahim Feb 02, 2024
  1. JavaScript replace() Method to Remove Specific Substring From a String
  2. JavaScript replace() Method With Regex to Remove All Occurrences of the Specific Substring From a String
  3. JavaScript substr() Method to Extract Specific Substring From a String
How to Remove Substring From String in JavaScript

JavaScript has two popular methods to remove substring from a string. Every method below will have a code example, which you can run on your machine.

JavaScript replace() Method to Remove Specific Substring From a String

The replace() function is a built-in function in JavaScript. It replaces a part of the given string with another string or a regular expression. It returns a new string from a given string and leaves the original string unchanged.

Syntax of replace():

Ourstring.replace(Specificvalue, Newvalue)

The Specificvalue will be replaced by the new value - Newvalue.

JavaScript replace() Method Example:

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        How to remove a substring from string in JavaScript? 
    </title> 
</head> 
  
<body> 
    <h1> 
        DelftStack 
    </h1> 
      
    <p>Our string is DelftStac for Software</p> 
      
    <p> 
        Our New String is: <span class="output"></span> 
    </p> 
  
    <button onclick="removeText()"> 
        Generate Text 
    </button> 
      
    <script type="text/javascript"> 
        function removeText() {
            ourWord = 'DelftStac for Software'; 
            ourNewWord = ourWord.replace('DelftStack', ''); 
  
            document.querySelector('.output').textContent 
                    = ourNewWord; 
        } 
    </script> 
</body> 
</html>

JavaScript replace() Method With Regex to Remove All Occurrences of the Specific Substring From a String

A regular expression is used instead of the Specificvalue along with the global property.

Example:

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        How to remove to remove all occurrences of the specific substring  from string in JavaScript? 
    </title> 
</head> 
  
<body> 
    <h1> 
        DelftStack 
    </h1> 
      
    <p>Our string is DelftStackforDelftStack</p> 
      
    <p> 
        Our New String is: <span class="output"></span> 
    </p> 
  
    <button onclick="removeText()"> 
        Generate Text 
    </button> 
      
    <script type="text/javascript"> 
        function removeText() {
            ourWord = 'DelftStackforDelftStack'; 
            ourNewWord = ourWord.replace(/DelftStack/g, ''); 
  
            document.querySelector('.output').textContent 
                    = ourNewWord; 
        } 
    </script> 
</body> 
</html>

JavaScript substr() Method to Extract Specific Substring From a String

The substr() function is a built-in function in JavaScript to extract a substring from a given string or return a portion of the string. It starts at the specified index and extends for a given number of characters.

substr() Syntax:

string.substr(startIndex, length)

startIndex is required. The length is optional, the length of the string to be selected from that Startindex, and if it is not specified, it extracts to the rest of the string.

Example:

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        How to remove a substring from string in JavaScript? 
    </title> 
</head> 
  
<body> 
    <h1> 
        DelftStack 
    </h1> 
      
    <p>Our string is DelftStackforDelftStack</p> 
      
    <p> 
        Our New String is: <span class="output"></span> 
    </p> 
  
    <button onclick="removeText()"> 
        Generate Text 
    </button> 
      
    <script type="text/javascript"> 
        function removeText() {
            ourWord = 'DelftStackforDelftStack'; 
            ourNewWord = ourWord.substr(10,13);
  
            document.querySelector('.output').textContent 
                    = ourNewWord; 
        } 
    </script> 
</body> 
  
</html>

Related Article - JavaScript String