What's the equivalent of encodeURIComponent in Elm?
Tags: elm, javascript
Published: 2019-06-21 14:49:10

---
title: What's the equivalent of encodeURIComponent in Elm?
published: true
description: 
tags: elm, javascript
---

I was building a [random quote machine](https://learn.freecodecamp.org/front-end-libraries/front-end-libraries-projects/build-a-random-quote-machine/) application in Elm and needed to create a [tweet web intent URL](https://developer.twitter.com/en/docs/twitter-for-websites/tweet-button/guides/web-intent.html).

> A tweet web intent makes it easy to compose and post a Tweet from a link.

Suppose you want to create a tweet web intent URL for the following quote:

> Less mental clutter means more mental resources available for deep thinking. ~ Cal Newport, [Deep Work: Rules for Focused Success in a Distracted World](http://www.calnewport.com/books/deep-work/)

## In JavaScript

You can do the following:

```javascript
content = 'Less mental clutter means more mental resources available for deep thinking.'
author = 'Cal Newport'

text = encodeURIComponent('"' + content + '" ~ ' + author)
url = 'https://twitter.com/intent/tweet?hashtags=quotes&text=' + text
```

To see what is supposed to happen, click [here](https://twitter.com/intent/tweet?hashtags=quotes&text=%22Less%20mental%20clutter%20means%20more%20mental%20resources%20available%20for%20deep%20thinking.%22%20~%20Cal%20Newport).

I use [encodeURIComponent](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent) because the `text` parameter requires a URL-encoded string.

## In Elm (0.19)

It took me a while but I finally found what I needed by using [Elm Search](https://klaftertief.github.io/elm-search/?q=String%20-%3E%20String).

**N.B.** *To get to Elm Search you can go to [Elm Packages](https://package.elm-lang.org/) and click the "Fancy Search" link under "Resources". That's how I found it.*

The function lives in the [elm/url](https://package.elm-lang.org/packages/elm/url/1.0.0) package and is called [percentEncode](https://package.elm-lang.org/packages/elm/url/1.0.0/Url#percentEncode). It gives you the same behaviour as JavaScript's `encodeURIComponent` function.

However, its documentation advises you to use [Url.Builder](https://package.elm-lang.org/packages/elm/url/1.0.0/Url-Builder) instead.

After reading the documentation you end up with something like the following:

```elm
import Url.Builder exposing (crossOrigin, string)

content = "Less mental clutter means more mental resources available for deep thinking."
author = "Cal Newport"

url =
  crossOrigin "https://twitter.com"
    [ "intent", "tweet" ]
    [ string "hashtags" "quotes"
    , string "text" ("\"" ++ content ++ "\" ~ " ++ author)
    ]
```

And that's exactly what I wanted.

## Summary

In Elm, the equivalent of `encodeURIComponent` is called `percentEncode` and it can be found in the `elm/url` package. But, it should only be used for extremely custom cases. There's [Url.Builder](https://package.elm-lang.org/packages/elm/url/1.0.0/Url-Builder), which abstracts away the URL encoding bits among other things, and it's what you want to use to create your URLs.