Implement polyfill for String.prototype.trim() method in JavaScript-JS Tutorial-php.cn

Implement polyfill for String.prototype.trim() method in JavaScript

PHPz

Release： 2023-08-24 11:49:13

forward

1044 people have browsed it

在 JavaScript 中为 String.prototype.trim() 方法实现 polyfill

Some older versions of browsers or the old browsers themselves do not support the newly developed functions of JavaScript. For example, if you are using a very old browser version, it does not support the functionality of the ES10 version of JavaScript. For example, some versions of browsers do not support the Array.falt() method introduced in the ES10 version of JavaScript to flatten arrays.

In this case, we need to implement user-defined methods to support the functionality of older browser versions. Here we will implement a polyfill for the trim() method of the String object.

grammar

Users can use regular expressions to implement polyfill for the string.prototype.trim() method according to the following syntax.

String.prototype.trim = function (string) {
   return str.replace(/^\s+|\s+$/g, "");
}

Copy after login

In the above syntax, we use regular expressions to replace the spaces at the beginning and end of the string.

Regular expression explanation

^ - This is the beginning of the string.
\s - represents one or more spaces.
| - It stands for "OR" operator.
\s $ - It represents a space at the end of the string.
g - It tells us to remove all matches.

Example (using built-in string.trim() method)

In the following example, we use the built-in trim() method of the String object to remove spaces at the beginning 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>

Copy after login

Example (polyfill implemented for string.trim() method)

In the example below, we implement a polyfill to trim strings using regular expressions. We wrote a regular expression to replace leading and trailing spaces with empty strings.

<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>

Copy after login

Example

In the following example, we use a for loop to find the index of the first and last valid character of a string. We create an array containing different characters representing whitespace. After that, the first for loop iterates through the characters of the string, checks for the first character that is not in the "spaces" array, and stores that index in the start variable. Additionally, it finds the first valid character from the last character in the same way.

Finally, we used the slice() method to get the substring starting from the "start" position 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>

Copy after login

Users learned how to implement polyfill for the string.trim() method in this tutorial. We have seen two ways to implement a polyfill for the trim() method. The first method uses regular expressions and the replace() method. The second method is the simple method, using a for loop, slice() and includes() methods.

The above is the detailed content of Implement polyfill for String.prototype.trim() method in JavaScript. For more information, please follow other related articles on the PHP Chinese website!