loading...
Cover image for How to replace all whitespaces in JavaScript?

How to replace all whitespaces in JavaScript?

evybauer profile image Evelyn Bauer ・3 min read

Next time, when you access a website, pay special attention to the whitespaces of a URL. They don’t exist! To understand why whitespaces are replaced in URLs, it is essential to study the anatomy of a URL.

The last piece of information of a URL is called “Parameter” or “Query Parameter.” Those extra bits of data are encoded to the URL, so they can query the parameters that allow the server to respond dynamically to users’ requests. Essentially, it guarantees that users can access any page nested within multiple paths.

Take the URL below as an example:
Alt Text

In this case, it performs a search for the sentence, “I love coding.” Together, the protocol, the server’s name and the query parameters direct users to whatever they type on a Google search, for example. Special characters immediately replace the whitespaces.

Check below three different ways to encode the whitespaces using %20.
Please, note that you can use other special characters, such as: !, “, #, or %3F.

SITUATION:
You have a standard string of words and want to percent-encode all whitespaces.

→ Example of string: I love coding!
→ Expected output: I%20love%20coding!

OPTION 1: For Loop (%20 in all whitespaces)
Alt Text

The loop runs once for each character, whitespaces, and special characters in the given string (text). Then, it returns a new string replacing the first whitespace, and assign a new string value back to the string variable (text). This value is set by String.prototype.replace() which returns a new string while replacing all the matches of the patterns we want to replace, in this case, the whitespaces are the patterns and the %20 the replacement. This process happens over and over until all whitespaces are matched and replaced by the %20. It includes the whitespaces at the beginning and the ends of a string.

OPTION 2: For Loop (%20 only between whitespaces)
Alt Text

The loop runs once for each character, whitespaces, and special characters in the given string (text). Then, it returns a new string replacing the first whitespace, and assign a new string value back to the string variable (text). This value is set by String.prototype.replace() which returns a new string while replacing all the matches of the patterns we want to replace, in this case, the whitespaces are the patterns and the %20 the replacement. This process happens over and over until all whitespaces are matched and replaced by the %20.In this case, the whitespaces at the beginning and the end of the string are not replaced.

OPTION 3: Using methods (%20 only between whitespaces)
Alt Text

If you prefer to simplify your code, avoid loops and use methods only, you can choose this option. Here, the String.prototype.trim() removes all whitespace from a string. Then the String.prototype.split() turns the string into an array of strings and the Array.prototype.join() concatenates all of the elements in an array (array-like-object) separating them by the %20. Hope you find this post useful 😊

Happy coding! 👩‍💻


Sources:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/join.
https://appendto.com/2016/02/replace-spaces-underscores-javascript/.
https://gizmodo.com/1722322072.
https://branch.io/glossary/query-parameters/.
https://developer.mozilla.org/en- https://developer.mozilla.org/en-https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/Trim.

Posted on by:

evybauer profile

Evelyn Bauer

@evybauer

👩‍💻Full-stack web developer with a desire to develop, create, and optimize user-friendly, feature-rich apps and websites.✨

Discussion

markdown guide