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
Implement polyfill for String.prototype.trim() method in JavaScript
Some old versions of the browsers or old browsers themselves don’t support the newly evolved features of JavaScript. For example, if you are using a very old browser version, it doesn’t support the features of the ES10 version of JavaScript. For example, some versions of the browser don’t support Array.falt() method, introduced in the ES10 version of JavaScript, to flatten the array.
In such cases, we need to implement user-defined methods to support that features by the old browser version. Here, we will implement the polyfill for the trim() method of the String object.
Syntax
Users can follow the syntax below to implement polyfill for string.prototype.trim() method using regular expression.
String.prototype.trim = function (string) {
return str.replace(/^\s+|\s+$/g, "");
}
In the above syntax, we have used the regular expression to replace the whitespaces from the start and end of the string.
Regular expression explained
^ − It is the start of the string.
\s+ − It represents one or more spaces.
| − It represents the ‘OR’ operator.
\s+$ − It represents the spaces at the end of the string.
g − It tells us that remove all matches.
Example (Using built-in string.trim() method)
In the example below, we have used the built-in trim() method of the String object to remove whitespaces from the start and end of the string.
<html>
<body>
<h2>Using the trim() method without polyfill in JavaScript</h2>
<div id = "content"> </div>
<script>
let content = document.getElementById('content');
let str = " This is string with white spaces! ";
content.innerHTML += "The original string is :-" + str + ".<br>";
let trimmed = str.trim();
content.innerHTML += "The trimmed string using trim() method is :-" + str + ".<br>";
</script>
</body>
</html>
Example (Implemented the polyfill for string.trim() method)
In the example below, we have implemented the polyfill to trim the string using regular expression. We have written the regular expression to replace the whitespaces from the start and end with an empty string.
<html>
<body>
<h2>Using the <i> trim() method with polyfill </i> in JavaScript</h2>
<div id = "content"> </div>
<script>
let content = document.getElementById('content');
String.prototype.trim = function (string) {
let regex = /^\s+|\s+$/g;
return str.replace(regex, "");
}
let str = "Hi, How are you? ";
content.innerHTML += "The original string is :-" + str + ".<br>";
let trimmed = str.trim();
content.innerHTML += "The trimmed string using trim() method is :-" + str + "<br>";
</script>
</body>
</html>
Example
In the example below, we have used the for loop to find the index of the string's first and last valid characters. We have created an array containing different characters representing the white space. After that, the first for loop iterates through the string’s characters, checks for the first character not in the ‘spaces’ array, and stores that index in the start variable. Also, it finds the first valid character from the last in the same way.
At last, we have used the slice() method to get the substring starting from the ‘start’ and ending at the ‘end’ position.
<html>
<body>
<h2>Using the <i> trim() method with polyfill </i> in JavaScript</h2>
<div id = "content"> </div>
<script>
let content = document.getElementById('content');
String.prototype.trim = function () {
const spaces = ["\s", "\t", "
", " ", "", "\u3000"];
let start = 0;
let end = this.length - 1;
// get the first index of the valid character from the start
for (let m = 0; m < this.length; m++) {
if (!spaces.includes(this[m])) {
start = m;
break;
}
}
// get the first index of valid characters from the last
for (let n = this.length - 1; n > -1; n--) {
if (!spaces.includes(this[n])) {
end = n;
break;
}
}
// slice the string
return this.slice(start, end + 1);
}
let str = " Hi, How are you? ";
content.innerHTML += "The original string is :-" + str + ".<br>";
let trimmed = str.trim();
content.innerHTML += "The trimmed string using trim() method is :-" + str + "<br>";
</script>
</body>
</html>
Users learned to implement the polyfill for the string.trim() method in this tutorial. We have seen two approaches to implementing polyfill for the trim() method. The first approach uses the regular expression and replace() method. The second approach is the naïve approach uses the for loop, slice(), and includes() method.
188 Views
