To continue the tutorial articles on JavaScript programming, today we will learn how to remove leading and trailing spaces from a string using JavaScript. Read on this article to learn more.
Remove leading and trailing spaces from a string using JavaScript
Here we will show you three ways to remove leading and trailing spaces from a string using JavaScript.
Using trim() function
The string.trim() function removes leading and trailing spaces. The method will return a string with leading and trailing spaces removed.
trim() syntax:
string.trim()
The function has no parameters to be passed.
In this way, we call trim() on a given string to remove leading and trailing whitespace. See the code below for a better understanding.
let beforeResult = document.getElementById('before--result');
let afterResult = document.getElementById('after--result');
const string = ' learnshareit.com ';
// display before
beforeResult.innerText = string;
// using trim()
let newString = string.trim();
// display after
afterResult.innerText = newString;And here is the code in the HTML file we use to display whitespace:
<body>
<main>
<div id="app">
<div class="before">
<label for="before--result">Before:</label>
<pre id="before--result"></pre>
</div>
<div class="after">
<label for="after--result">After:</label>
<pre id="after--result"></pre>
</div>
</div>
</main>
</body>Output:
Using replace() function
We’ve covered the replace() syntax in a previous post. You can read it here.
We will use replace() to replace all leading and trailing spaces with empty strings by using the regex like below:
The regular expression:
/^\s+|\s+$/g
In there:
/and/beginning and ending regex^starting point position\s+means one or more spaces|means OR$ending point positiongreplace all occurrences
See the code sample to learn how to use regex with replace():
let beforeResult = document.getElementById('before--result');
let afterResult = document.getElementById('after--result');
const string = ' learnshareit.com ';
// display before
beforeResult.innerText = string;
// using replace()
let newString = string.replace(/^\s+|\s+$/g, '');
// display after
afterResult.innerText = newString;Output:
Using trimStart() function and trimEnd() function
TrimStart() is a function of the string object. It removes spaces at the beginning of a JavaScript string and creates a new string. This deletion does not change the original string.
Syntax:
str.trimStart()
Parameters:
- str: the original string to remove leading spaces.
TrimEnd() is a function of the string object. It removes trailing spaces from JavaScript strings and creates a new string. This deletion does not change the original string.
Syntax:
str.trimEnd()
Parameters:
- str: the original string to remove trailing spaces.
First, we use the trimStart() function to remove spaces at the beginning of the given string. The result is a new string created from the old string with leading spaces removed. Then we use the trimEnd() function to delete the trailing spaces of the newly created string. In the end, we will get a string with leading and trailing spaces removed like this:
let beforeResult = document.getElementById('before--result');
let trimStartResult = document.getElementById('trim-start--result');
let afterResult = document.getElementById('after--result');
const string = ' learnshareit.com ';
// display before
beforeResult.innerText = string;
// display trimStart()
let trimStartString = string.trimStart();
trimStartResult.innerText = trimStartString;
// display trimEnd()
let trimEndString = trimStartString.trimEnd();
afterResult.innerText = trimEndString;Output:
Summary
We have shown you how to remove leading and trailing spaces from a string using JavaScript in 3 ways. And we recommend you use the trim() function to save time and write less code. We hope the above article was helpful to you. Thank you for reading!
Maybe you are interested:
- Replace a comma with a Dot in JavaScript
- Remove The Leading And Trailing Comma From A String Using JavaScript
- Remove all spaces from a string in javascript
Hi, I’m Cora Lopez. I have a passion for teaching programming languages such as Python, Java, Php, Javascript … I’m creating the free python course online. I hope this helps you in your learning journey.
Name of the university: HCMUE
Major: IT
Programming Languages: HTML/CSS/Javascript, PHP/sql/laravel, Python, Java
