Skip to content
Related Articles

Related Articles

Improve Article
How to remove text from a string in JavaScript?
  • Last Updated : 22 Nov, 2019

There are three methods to remove the text from a string which are listed below:

Method 1: Using replace() method: The replace method can be used to replace the specified string with another string. It takes two parameters, first is the string to be replaced and the second is the string which is replacing from the first string. The second string can be given an empty string so that the text to be replaced is removed. This method however only removes the first occurrence of the string.

Syntax:

string.replace('textToReplace', '');

Example: This example replace the first occurrence of string.




<!DOCTYPE html>
<html>
  
<head>
    <title>
        How to remove text from
        a string in JavaScript?
    </title>
</head>
  
<body>
    <h1 style="color: green">
        GeeksforGeeks
    </h1>
      
    <b>
        How to remove text from a
        string in JavaScript?
    </b>
      
    <p>Original string is GeeksforGeeks</p>
      
    <p>
        New String is: <span class="output"></span>
    </p>
  
    <button onclick="removeText()">
        Remove Text
    </button>
      
    <script type="text/javascript">
        function removeText() {
            originalText = 'GeeksForGeeks';
            newText = originalText.replace('Geeks', '');
  
            document.querySelector('.output').textContent
                    = newText;
        }
    </script>
</body>
</html>                    

Output:



  • Before clicking the button:
    replace-before
  • After clicking the button:
    replace-after

Method 2: Using replace() method with regex: This method is used to remove all occurrences of the string specified, unlike the previous method. A regular expression is used instead of the string along with the global property. This will select every occurrence in the string and it can be removed by using an empty string in the second parameter.

Syntax:

string.replace(/regExp/g, '');

Example:




<!DOCTYPE html>
<html>
      
<head>
    <title>
        How to remove text from a
        string in JavaScript?
    </title>
</head>
  
<body>
    <h1 style="color: green">
        GeeksforGeeks
    </h1>
      
    <b>
        How to remove text from a 
        string in JavaScript?
    </b>
      
    <p>Original string is GeeksforGeeks</p>
      
    <p>
        New String is: <span class="output"></span>
    </p>
  
    <button onclick="removeText()">
        Remove Text
    </button>
      
    <script type="text/javascript">
        function removeText() {
            originalText = 'GeeksForGeeks';
            newText = originalText.replace(/Geeks/g, '');
  
            document.querySelector('.output').textContent
                    = newText;
        }
    </script>
</body>
</html>                    

Output:

  • Before clicking the button:
    replace-global-before
  • After clicking the button:
    replace-global-after

Method 3: Using substr() method: The substr() method is used to extract parts of a string between the given parameters. This method takes two parameters, one is the starting index and the other is the length of the string to be selected from that index. By specifying the required length of the string needed, the other portion can be discarded. This can be used to remove prefixes or suffixes in a string.

Syntax:

string.substr(start, length);

Example:




<!DOCTYPE html>
<html>
  
<head>
    <title>
        How to remove text from a
        string in JavaScript?
    </title>
</head>
  
<body>
    <h1 style="color: green">
        GeeksforGeeks
    </h1>
      
    <b>
        How to remove text from a
        string in JavaScript?
    </b>
      
    <p>Original string is GeeksforGeeks</p>
      
    <p>
        New String is: <span class="output"></span>
    </p>
  
    <button onclick="removeText()">
        Remove Text
    </button>
      
    <script type="text/javascript">
        function removeText() {
            originalText = 'GeeksForGeeks';
            newText = originalText.substr(3, 9);
  
            document.querySelector('.output').textContent
                    = newText;
        }
    </script>
</body>
  
</html>                    

Output:

  • Before clicking the button:
    substr-before
  • After clicking the button:
    substr-after



My Personal Notes arrow_drop_up
Recommended Articles
Page :