It is very good to know each and every method to solve the problem that we are facing when coding.
In today's article, I will show you all the best methods to remove whitespace from the String in JavaScript.
In this article, I will show you the Two Methods to remove the whitespace, From anywhere inside the string.
All three methods are different I will show you each of them with an example. But before getting to the methods lets check what actually is whitespace in HTML and Javascript.
What is whitespace?
Whitespace usually can be a single space, a tab space, new line. We usually used this for formatting or indentation. But sometimes it can be frustrating when we don't want it.
Imagine that you are extracting the text from a paragraph element using javascript but you see that there is so messed in the extracted text like un-necessary spaces or new lines etc So By default HTML Ignores this spaces but javascript will not do that you need some methods to remove it.
We cannot remove it directly as it is used for visual presentation but it can be removed easily using Javascript methods.
Best ways to remove whitespace are:
- Trim()
- Replace()
Trim():
This is a built-in method in JavaScript. The trim method will remove unnecessary whitespace from the string in beginning and at the end.
The Trim Method will not change the original string. It will return the new string. The only limitation it has is it will remove the whitespaces from the beginning and the end not anywhere between the string.
The Syntax:
let TextContainer = 'Hello this is demo text';
TextContainer.trim();
Here is an example:
In the Above Example, you can clearly see the trim() method removing the extra spaces from the start and the end.
So Now what if we want to remove the whitespace from everywhere inside the string? Whether there is a way to remove?
Yes, The best way is using the Replace method with regex pattern. Let see it in action.
Replace() :
This is also a built-in method in javascript. This method will search your specified value in the string and will replace it with the new one.The name itself is describing its functionality what it does it accepts two parameters one is the keyword to search in the string and second is the word to replace if it matches.
Note: It also accepts a regular expression pattern as the first parameter to search the string.
The Syntax:
let TextContainer = 'Hello this is demo text'; TextContainer.replace(ValueToSearch, ValueToReplace);
You have seen above the syntax it accepts two arguments. this method can be applied to any variables that contain a string or directly on the string datatype.
ValueToSearch: This field is mandatory so you have to enter the text/pattern you want to search in the TextContainer.
ValueToReplace: This field is also mandatory as you have to enter the replacement value if the search is successful.
In the above example, we are using Regex Pattern Here. I will not go deep into the regex as the topic is different. The syntax to write regex is to enter the pattern between two slashes. The \s means Whitespace which includes all the tabs & spaces And the + sign is known as quantifier used to select more than one item. After the slash we used 'g' which means global to replace all the spaces and 'm' is for the multiline check.
Conclusion:
Today we learned Removing whitespace efficiently with Javascript trim and replace methods. We also learned the syntax to use them Just practice it with your own text or you can use the DOM elements and extract the text from it.That's It Thanks For Following our Tutorial '' jQuery Pretty Image Slider v1.0 with partially visible side slides '' Along With us If you found any difficulty Please Comment and Share Your Valuable Opinion. And Stay tuned for More Tutorials Like This and Share this with your friends.
