whatwg-url vs uri-js vs url-parse vs query-string vs uri-template
URL Manipulation and Parsing
whatwg-urluri-jsurl-parsequery-stringuri-templateSimilar Packages:
URL Manipulation and Parsing

URL Manipulation and Parsing libraries in JavaScript provide developers with tools to work with Uniform Resource Locators (URLs) more effectively. These libraries simplify tasks such as parsing URLs into their components (like protocol, host, path, query, and fragment), constructing URLs from components, encoding and decoding query parameters, and handling URL-related operations in a more structured and reliable way. They help ensure that URL manipulation is done correctly, taking into account various standards and edge cases, which is crucial for web applications that interact with APIs, handle routing, or perform any operation that involves URLs.

Npm Package Weekly Downloads Trend
3 Years
Github Stars Ranking
Stat Detail
Package
Downloads
Stars
Size
Issues
Publish
License
whatwg-url113,360,937406100 kB83 months agoMIT
uri-js69,280,442316-315 years agoBSD-2-Clause
url-parse29,419,7951,03563 kB14-MIT
query-string16,684,2516,89657.7 kB23 months agoMIT
uri-template262,09943-14 years agoMIT
Feature Comparison: whatwg-url vs uri-js vs url-parse vs query-string vs uri-template

Parsing and Stringifying Query Parameters

  • whatwg-url:

    whatwg-url provides a detailed and standards-compliant way to parse URLs, including their query components. It follows the URL specification closely, ensuring accurate parsing and manipulation of query parameters, but it is more complex and lower-level compared to query-string.

  • uri-js:

    uri-js focuses on URI parsing and manipulation rather than query parameters specifically. It provides detailed parsing of URIs, including the query component, but does not offer specialized functions for query string manipulation. It is more comprehensive in terms of URI handling but less focused on query parameters.

  • url-parse:

    url-parse offers basic parsing of query parameters as part of its URL parsing functionality. It allows access to the query string and provides a simple way to manipulate it, but it is not as feature-rich as query-string for dedicated query parameter handling.

  • query-string:

    query-string provides simple functions for parsing and stringifying query parameters. It handles nested objects and arrays, making it easy to work with complex query strings. The API is straightforward, allowing for quick manipulation of query data.

  • uri-template:

    uri-template does not parse or stringify query parameters directly. Instead, it works with URI templates that can include query parameters as part of the template. You would need to combine it with another library for full query parameter manipulation.

URI Validation

  • whatwg-url:

    whatwg-url provides thorough validation of URLs based on the WHATWG URL standard. It ensures that URLs are parsed and manipulated in a standards-compliant manner, making it reliable for applications that require accurate URL handling.

  • uri-js:

    uri-js includes robust URI validation as part of its parsing and manipulation features. It checks for compliance with URI standards and can validate different components of a URI, making it suitable for applications that require strict validation.

  • url-parse:

    url-parse does not perform comprehensive URI validation. It parses URLs and provides access to their components, but it does not validate the structure or compliance of the URL with any standards.

  • query-string:

    query-string does not perform URI validation. It focuses on parsing and stringifying query parameters without validating the overall structure of the URI or its components.

  • uri-template:

    uri-template does not validate URIs. It works with URI templates but does not provide any validation features for the URIs or templates themselves.

Handling Special Characters

  • whatwg-url:

    whatwg-url handles special characters in URLs according to the WHATWG URL specification. It provides detailed encoding and decoding of characters, ensuring that URLs are processed correctly in compliance with web standards.

  • uri-js:

    uri-js handles special characters as part of its comprehensive URI parsing and manipulation. It follows URI standards for encoding and decoding characters, but it does not provide specialized functions for handling special characters in query parameters.

  • url-parse:

    url-parse handles special characters in URLs during parsing and serialization. It follows standard encoding practices, but like url-parse, it does not provide extensive features for managing special characters beyond basic parsing and manipulation.

  • query-string:

    query-string handles special characters in query parameters by encoding and decoding them as needed. It follows standard URL encoding practices to ensure that characters like spaces, &, =, and others are properly handled when parsing and stringifying query strings.

  • uri-template:

    uri-template handles special characters within the context of URI templates. It allows for the encoding and decoding of characters as part of the template processing, but it does not specifically address special characters outside of that context.

Code Examples

  • whatwg-url:

    Parsing a URL with whatwg-url

    import { URL } from 'whatwg-url';
    
    // Creating a URL object
    const url = new URL('https://example.com:8080/path?query=1#fragment');
    
    // Accessing URL components
    console.log(url.protocol); // 'https:'
    console.log(url.hostname); // 'example.com'
    console.log(url.port); // '8080'
    console.log(url.pathname); // '/path'
    console.log(url.search); // '?query=1'
    console.log(url.hash); // '#fragment'
    
  • uri-js:

    Parsing and Validating a URI with uri-js

    import { URI } from 'uri-js';
    
    // Parsing a URI
    const uri = URI.parse('https://example.com:8080/path?query=1#fragment');
    console.log(uri);
    
    // Validating a URI
    const isValid = URI.validate('https://example.com');
    console.log(isValid); // true
    
  • url-parse:

    Parsing a URL with url-parse

    import Url from 'url-parse';
    
    // Parsing a URL
    const url = new Url('https://example.com:8080/path?query=1#fragment');
    console.log(url);
    
    // Accessing URL components
    console.log(url.protocol); // 'https:'
    console.log(url.host); // 'example.com:8080'
    console.log(url.query); // '?query=1'
    console.log(url.hash); // '#fragment'
    
  • query-string:

    Parsing and Stringifying Query Parameters with query-string

    import { parse, stringify } from 'query-string';
    
    // Parsing a query string
    const parsed = parse('?name=John&age=30&hobbies[]=reading&hobbies[]=coding');
    console.log(parsed);
    // Output: { name: 'John', age: '30', hobbies: ['reading', 'coding'] }
    
    // Stringifying an object to a query string
    const queryString = stringify({ name: 'Jane', age: 25, hobbies: ['music', 'art'] });
    console.log(queryString);
    // Output: 'name=Jane&age=25&hobbies[]=music&hobbies[]=art'
    
  • uri-template:

    Using uri-template to Create a URI from a Template

    import { parse, expand } from 'uri-template';
    
    // Defining a URI template
    const template = parse('https://api.example.com/users/{id}/posts{?sort,page}');
    
    // Expanding the template with variables
    const uri = expand(template, { id: 42, sort: 'date', page: 1 });
    console.log(uri); // Output: 'https://api.example.com/users/42/posts?sort=date&page=1'
    
How to Choose: whatwg-url vs uri-js vs url-parse vs query-string vs uri-template
  • whatwg-url:

    Select whatwg-url if you need a robust implementation of the URL standard as defined by the WHATWG (Web Hypertext Application Technology Working Group). It is particularly useful for applications that require a standards-compliant URL parser and manipulator, ensuring consistency across different environments.

  • uri-js:

    Select uri-js if you need a comprehensive library that handles all aspects of URI (Uniform Resource Identifier) parsing, validation, and manipulation. It is ideal for applications that require strict compliance with URI standards and need to handle a wide range of URI formats.

  • url-parse:

    Choose url-parse if you want a lightweight alternative to the built-in URL API with additional features like easy serialization of URL components. It is suitable for projects that need a simple and efficient way to parse and manipulate URLs without relying on the native URL class.

  • query-string:

    Choose query-string if you need a lightweight and simple solution for parsing and stringifying query parameters. It is particularly useful for projects that require easy manipulation of the query string without the overhead of a larger library.

  • uri-template:

    Opt for uri-template if you need to work with URI templates, which allow for the creation of dynamic URLs based on a template and a set of variables. This is useful for applications that need to generate URLs based on a predefined structure, such as RESTful APIs.

README for whatwg-url

whatwg-url

whatwg-url is a full implementation of the WHATWG URL Standard. It can be used standalone, but it also exposes a lot of the internal algorithms that are useful for integrating a URL parser into a project like jsdom.

Specification conformance

whatwg-url is currently up to date with the URL spec up to commit 05a5d83.

For file: URLs, whose origin is left unspecified, whatwg-url chooses to use a new opaque origin (which serializes to "null").

whatwg-url does not yet implement any encoding handling beyond UTF-8. That is, the encoding override parameter does not exist in our API.

API

The URL and URLSearchParams classes

The main API is provided by the URL and URLSearchParams exports, which follows the spec's behavior in all ways (including e.g. USVString conversion). Most consumers of this library will want to use these.

Low-level URL Standard API

The following methods are exported for use by places like jsdom that need to implement things like HTMLHyperlinkElementUtils. They mostly operate on or return an "internal URL" or "URL record" type.

The stateOverride parameter is one of the following strings:

The URL record type has the following API:

These properties should be treated with care, as in general changing them will cause the URL record to be in an inconsistent state until the appropriate invocation of basicURLParse is used to fix it up. You can see examples of this in the URL Standard, where there are many step sequences like "4. Set context object’s url’s fragment to the empty string. 5. Basic URL parse input with context object’s url as url and fragment state as state override." In between those two steps, a URL record is in an unusable state.

The return value of "failure" in the spec is represented by null. That is, functions like parseURL and basicURLParse can return either a URL record or null.

whatwg-url/webidl2js-wrapper module

This module exports the URL and URLSearchParams interface wrappers API generated by webidl2js.

Development instructions

First, install Node.js. Then, fetch the dependencies of whatwg-url, by running from this directory:

npm install

To run tests:

npm test

To generate a coverage report:

npm run coverage

To build and run the live viewer:

npm run prepare
npm run build-live-viewer

Serve the contents of the live-viewer directory using any web server.

Supporting whatwg-url

The jsdom project (including whatwg-url) is a community-driven project maintained by a team of volunteers. You could support us by:

  • Getting professional support for whatwg-url as part of a Tidelift subscription. Tidelift helps making open source sustainable for us while giving teams assurances for maintenance, licensing, and security.
  • Contributing directly to the project.