---
title: "💭 encodeURIComponent() - JavaScript | MDN"
description: "!https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent"
date: 2023-07-28
published: true
tags:
  - javascript
  - webdev
  - thought
template: link
---


<div class="embed-card embed-card-external">
  <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent" class="embed-card-link" target="_blank" rel="noopener noreferrer">
    <div class="embed-card-image">
      <img src="https://developer.mozilla.org/mdn-social-image.46ac2375.png" alt="encodeURIComponent() - JavaScript | MDN — The encodeURIComponent() function encodes a URI by replacing each instance of certain characters by one, two, three, or four escape sequences representing the UTF-8 encoding of the character (will only be four escape sequences for characters composed of two surrogate characters). Compared to encodeURI(), this function encodes more characters, including those that are part of the URI syntax." loading="lazy">
    </div>
    <div class="embed-card-content">
      <div class="embed-card-title">encodeURIComponent() - JavaScript | MDN</div>
      <div class="embed-card-description">The encodeURIComponent() function encodes a URI by replacing each instance of certain characters by one, two, three, or four escape sequences representing the UTF-8 encoding of the character (will ...</div>
      <div class="embed-card-meta">MDN Web Docs &middot; developer.mozilla.org</div>
    </div>
  </a>
</div>


In order to send data that includes special characters such as `/` in a url you need to url encode it.  You have probably seen these many times in urls with things like %20 for spaces.

I'm working on a chrome extension to make quick blog posts, like thoughts or a persistent bookmark tool with comments.  The backend is written in fastapi and when I check to see if I have a post for a page I need to url encode it.

``` bash
curl -X 'GET' \
  'https://thoughts.waylonwalker.com/link/?link=https%3A%2F%2Fhtmx.org%2Fextensions%2Fclient-side-templates%2F' \
  -H 'accept: application/json'
```

> curl example generated from the fastapi swagger docs.

Here is how I used javascript's `encodeURIComponent` to turn my chrome extension into a notification when I already have a post for the current page.

``` js
// Event listener for tab changes
chrome.tabs.onActivated.addListener(function (activeInfo) {
  // Get the active tab information
  chrome.tabs.get(activeInfo.tabId, function (tab) {
    const url = tab.url || "";

    getData(`https://thoughts.waylonwalker.com/link/?link=${encodeURIComponent(url)}`).then((data) => {
        console.log('link data: ', data);
      if (data.hasOwnProperty('detail')) {
        chrome.browserAction.setBadgeText({ text: "" });
      } else {
        localStorageKey = `formData-${url}`;
        chrome.browserAction.setBadgeText({ text: "1" });
        chrome.browserAction.setBadgeBackgroundColor({ color: "#80A3D5" });
        localStorage.setItem(localStorageKey, JSON.stringify(data));
      }
    });
  });
});
```


!!! note

    This post is a <a href="/thoughts/" class="wikilink" data-title="Thoughts" data-description="These are generally my thoughts on a web page or some sort of url, except a rare few don&#39;t have a link. These are dual published off of my..." data-date="2024-04-01">thought</a>. It's a short note that I make
    about someone else's content online <a href="/tags/thoughts/" class="hashtag-tag" data-tag="thoughts" data-count=2 data-reading-time=3 data-reading-time-text="3 minutes">#thoughts</a>