Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Replace whitespace in different elements with the same class in JavaScript?
In this article we are going to learn about replace whitespace in different elements with same class in JavaScript. Let’s look into the article to learn more about replacing whitespaces in different elements.
Using split() and join() Methods
The split() method divides a string into several substrings and returns them as an array. When a separator is present in the string, the string is split according to the separator that was specified as a parameter. This parameter specifies the space character (" ") to divide the string whenever a space is present.
A separator is used to join an array of strings when using the join() method. The joined string will be included in the new string that is returned using the chosen separator. The returned array is subjected to this method, and the strings are joined without the use of a separator ("").
Syntax
Following is the syntax for split() and join() Method.
string.split(" ").join("")
Example
In the following example we are using split() and join() Method.
<!DOCTYPE html>
<html>
<body>
<p>
C R E D I T C A R D
</p>
<button onclick="removeSpaces()">
Remove Spaces
</button>
<p>
After Removing Spaces:
<span class="output"></span>
</p>
<script>
function removeSpaces() {
originalText = "C R E D I T C A R D";
removedSpacesText = originalText.split(" ").join("");
document.querySelector('.output').textContent = removedSpacesText;
}
</script>
</body>
</html>
When the script gets executed, it will generate an output consisting of the text we have mentioned in the script along with a button. If the user clicks the button named "Remove Spaces," the event gets triggered and displays the text used in the script with no space left between them.
Using replace() method with regex
A string can be replaced with another string using the replace() method. The first parameter is the string that needs to be replaced, and the second parameter is the string that needs to be replaced with.
The global property and a regular expression with the space character (" ") are sent as the first parameter. When using an empty string as the second parameter, this will delete all instances of spaces from the string. The original string's spaces will all be eliminated by doing this.
Syntax
Following is the syntax for replace() method with regex
string.replace(/ /g, "")
Example
Considering the following example, we are Using replace() method with regex to remove white spaces
<!DOCTYPE html>
<html>
<body>
<p>
W E L C O M E
</p>
<button onclick="Spaces()">
Remove Spaces
</button>
<p>
Updated :
<span class="output"></span>
</p>
<script>
function Spaces() {
originalText = "W E L C O M E";
newText = originalText.replace(/ /g, "");
document.querySelector('.output').textContent = newText;
}
</script>
</body>
</html>
On running the above script, the output window will pop up and display the text used in the script along with the clickable button. When the user clicks the button, the event gets triggered and displays a string of text with no spaces between them on the webpage.
Using reduce() method with spread operator
The string is transformed into an array using the spread operator, and When an array needs to be reduced to a single value, the reduce() method is used.
It executes a supplied function for each array value, stores the return result of the function in an accumulator, and creates a single value from the array function to determine whether each character in a string is a space If the character is a space, don't add it to the accumulator; if it's not a space, add it. The final accumulator returns a string without any white space.
Syntax
Following is the syntax for reduce() method with spread operator
[...string].reduce((accum, char)=> (char===" ") ? accum : accum + char, '')
Example
Let’s consider another example where we are Using reduce() method with spread operator to remove white spaces.
<!DOCTYPE html>
<html>
<body>
<p>
T U T O R I A L
</p>
<button onclick="Spaces()">
Remove Spaces
</button>
<p>
Updated One:
<span class="output"></span>
</p>
<script>
function Spaces() {
originalText = "T U T O R I A L";
removedSpacesText = [...originalText].reduce((accum, char)=> (char===" ") ? accum : accum+char, '') ;
document.querySelector('.output').textContent = removedSpacesText;
}
</script>
</body>
</html>
When the script gets executed, it will generate an output consisting of the text we have mentioned in the script along with a button. If the user clicks the button named "Remove Spaces," the event gets triggered and displays the text used in the script with no space left between them.
320 Views
To Continue Learning Please Login