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

In this article, we will learn how to implement a polyfill for a string.prototype.trim() method in JavaScript.

A polyfill is a piece of computer code written to implement a feature in a browser that does not yet support it. It could be because of the older version of the browser you are using, or that the new version of the browser does not have that feature.

We will discuss the trim() method supported by strings in JavaScript, and implement our own version of it as well. The trim() method removes all the whitespace from both the ends (left and right ends) of the string and returns the leftover string. The contents of the string, other than whitespace, remain untouched. 

Example:

Javascript

<script>
    const str = "   Hello world!   ";

    console.log(str);
    console.log(str.trim());
</script>

Output:

"   Hello world!"
"Hello world!"

String.prototype.trim() method: Let us create our own simple polyfill for the trim() method.

Example 1: The following code uses regex to remove whitespace.

Javascript

<script>
    const trim = (str) => {

        // let's breakdown the above regex
        // '/s+' represents one or more
        // whitespace characters
        // '^' represents characters at the
        // beginning of the expression
        // '$' represents characters at
        // the end of the expression
        // we replace all the whitespace
        // characters at the beginning and
        // the end of the string with "" (empty string)
        return str.replace(/^\s+|\s+$/g, "");
    }

    let s = "  Geeksforgeeks";
    console.log(s);
    console.log(trim(s));
</script>

Output:

"  Geeksforgeeks"
"Geeksforgeeks"

Example 2: The following code loops through the string and removes whitespace from the beginning and end of the string, separately.

Javascript

<script>

    // Declare a whitespaces array
    const whitespaces = [" ", "", "\s", "\t", "\n", "\u3000"];

    const trim = (str) => {
        let stringBeg = 0, stringEnd = str.length;

        // Find the index from the beginning of the string
        // which is not a whitespace
        for (let i = 0; i < str.length; i++) {
            if (whitespaces.indexOf(str[i]) === -1) {
                stringBeg = i;
                break;
            }
        }

        // Find the index from the end of the string
        // which is not a whitespace
        for (let j = str.length - 1; j >= 0; j--) {
            if (whitespaces.indexOf(str[j]) === -1) {
                stringEnd = j;
                break;
            }
        }

        // Return the string between the 2 found indices
        return str.slice(stringBeg, stringEnd + 1);
    }

    let s = "  Geeksforgeeks";
    console.log(s);
    console.log(trim(s));
</script>

Output: 

"  Geeksforgeeks"
"Geeksforgeeks"