Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Replace whitespace in different elements with the same class in JavaScript?
In this article we are going to learn about replacing whitespace in different elements with the same class in JavaScript. We'll explore multiple methods to remove spaces from text content across multiple HTML elements that share a common CSS class.
Using split() and join() Methods
The split() method divides a string into substrings and returns them as an array. When a separator is specified, the string is split at each occurrence of that separator. The join() method combines array elements back into a single string using a specified separator.
Syntax
string.split(" ").join("")
Example
In the following example we are using split() and join() methods to remove spaces from multiple elements with the same class:
<!DOCTYPE html>
<html>
<body>
<p class="spaced-text">C R E D I T C A R D</p>
<p class="spaced-text">B A N K I N G S Y S T E M</p>
<p class="spaced-text">S E C U R E P A Y M E N T</p>
<button onclick="removeSpaces()">
Remove Spaces from All Elements
</button>
<script>
function removeSpaces() {
// Select all elements with class 'spaced-text'
let elements = document.querySelectorAll('.spaced-text');
elements.forEach(function(element) {
let originalText = element.textContent;
let removedSpacesText = originalText.split(" ").join("");
element.textContent = removedSpacesText;
});
}
</script>
</body>
</html>
When the script executes, it displays three paragraphs with spaced text. Clicking the "Remove Spaces from All Elements" button removes spaces from all elements with the spaced-text class.
Using replace() Method with Regex
The replace() method can replace parts of a string with another string. Using a regular expression with the global flag /g, we can replace all occurrences of spaces with an empty string.
Syntax
string.replace(/ /g, "")
Example
Here we use the replace() method with regex to remove whitespace from multiple elements:
<!DOCTYPE html>
<html>
<body>
<div class="content">W E L C O M E</div>
<div class="content">T O O U R S I T E</div>
<div class="content">E N J O Y L E A R N I N G</div>
<button onclick="removeSpaces()">
Remove Spaces
</button>
<script>
function removeSpaces() {
let elements = document.querySelectorAll('.content');
elements.forEach(function(element) {
let originalText = element.textContent;
let newText = originalText.replace(/ /g, "");
element.textContent = newText;
});
}
</script>
</body>
</html>
On running the script, clicking the button removes all spaces from text content in elements with the content class, including multiple consecutive spaces.
Using reduce() Method with Spread Operator
The spread operator converts a string into an array of characters. The reduce() method processes each character, building a new string that excludes space characters.
Syntax
[...string].reduce((accum, char) => (char === " ") ? accum : accum + char, '')
Example
Let's use the reduce() method with spread operator to remove whitespace from multiple elements:
<!DOCTYPE html>
<html>
<body>
<span class="tutorial-text">T U T O R I A L</span>
<span class="tutorial-text">P O I N T</span>
<span class="tutorial-text">J A V A S C R I P T</span>
<button onclick="removeSpaces()">
Remove Spaces
</button>
<script>
function removeSpaces() {
let elements = document.querySelectorAll('.tutorial-text');
elements.forEach(function(element) {
let originalText = element.textContent;
let removedSpacesText = [...originalText].reduce((accum, char) =>
(char === " ") ? accum : accum + char, '');
element.textContent = removedSpacesText;
});
}
</script>
</body>
</html>
When executed, this script processes each span element with the tutorial-text class, removing all spaces from their text content using the reduce method.
Comparison of Methods
| Method | Performance | Readability | Best For |
|---|---|---|---|
split().join() |
Good | High | Simple space removal |
replace() with regex |
Best | Medium | Complex patterns, multiple spaces |
reduce() with spread |
Fair | Low | Custom character filtering |
Conclusion
All three methods effectively remove whitespace from multiple elements with the same class. The replace() method with regex is generally the most efficient, while split().join() offers the best readability for simple space removal tasks.
498 Views
