uri-tag

ES6 template literal tag to encode URI components

Usage no npm install needed!

<script type="module">
  import uriTag from 'https://cdn.skypack.dev/uri-tag';
</script>

README

uri-tag

npm Travis MIT TypeScript

A template literal tag to encode URI components. Allows you to to build a URI string, where any expressions will be safely encoded.

import uri from 'uri-tag';

const name = getName(); // Arbitrary user input
const status = getStatus(); // Arbitrary user input

const myUri = uri`https://example.com/api/users?name=${name}&status=${status}`;

Uses RFC 3986 compliant URI encoding to encode any unsafe character sequences to their escaped representations:

const query = 'query with special chars ! ? foo=bar %';
const endpoint = uri`/api/search?q=${query}`;

// endpoint === '/api/search?q=query%20with%20special%20chars%20%21%20%3F%20foo%3Dbar%20%25'

To bypass encoding for a specific component, you can use uri.raw:

const apiBase = 'https://example.com/api/v1';
const query = 'foo/bar';
const endpoint = uri`${uri.raw(apiBase)}/users?name=${query}`;

// endpoint === 'https://example.com/api/v1/users?name=foo%2Fbar'

uri.raw uses a unique symbol under the hood, so that only code with access to the uri-tag module can pass in a raw template variable. Any user input from an external source (so, strings, JSON objects, etc.) will not be able to access this symbol.

Types

This package includes definitions for TypeScript.

Similar packages