CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-resolve-pathname

Resolve URL pathnames using JavaScript with 100% browser compatibility

—

Pending
Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

index.mddocs/

resolve-pathname

resolve-pathname provides a pure JavaScript implementation for resolving URL pathnames that is 100% compatible with browser pathname resolution behavior. It resolves pathnames identically to how browsers resolve the pathname of an <a href> value, supporting both absolute and relative path resolution, proper handling of '..' and '.' path segments, and maintaining trailing slash behavior.

Package Information

  • Package Name: resolve-pathname
  • Package Type: npm
  • Language: JavaScript (ES6 modules with CommonJS build)
  • Installation: npm install resolve-pathname

Core Imports

// ES6 modules
import resolvePathname from 'resolve-pathname';

For CommonJS:

// CommonJS modules
var resolvePathname = require('resolve-pathname');

For UMD (browser):

<script src="https://unpkg.com/resolve-pathname"></script>
<!-- Available as window.resolvePathname -->

Basic Usage

import resolvePathname from 'resolve-pathname';

// Simply pass the pathname you'd like to resolve. Second
// argument is the path we're coming from, or the current
// pathname. When undefined, it defaults to empty string.
resolvePathname('about', '/company/jobs'); // /company/about
resolvePathname('../jobs', '/company/team/ceo'); // /company/jobs
resolvePathname('about'); // about
resolvePathname('/about'); // /about

// Index paths (with a trailing slash) are also supported and
// work the same way as browsers.
resolvePathname('about', '/company/info/'); // /company/info/about

// In browsers, it's easy to resolve a URL pathname relative to
// the current page. Just use window.location! e.g. if
// window.location.pathname == '/company/team/ceo' then
resolvePathname('cto', window.location.pathname); // /company/team/cto
resolvePathname('../jobs', window.location.pathname); // /company/jobs

Capabilities

Pathname Resolution

Resolves URL pathnames using the same algorithm as browsers, providing 100% compatibility with browser pathname resolution behavior.

/**
 * Resolve URL pathnames identical to how browsers resolve the pathname of an <a href> value.
 * 
 * @param {string} to - The pathname to resolve (can be relative or absolute)
 * @param {string} [from] - The current pathname to resolve from (optional, defaults to empty string when undefined)
 * @returns {string} The resolved pathname
 */
function resolvePathname(to, from);

Parameters:

  • to (string): The pathname you want to resolve. Can be:
    • Absolute path (starting with '/'): e.g., '/about'
    • Relative path: e.g., 'about', '../jobs'
    • Parent directory reference: e.g., '..'
    • Current directory reference: e.g., '.'
    • Empty string: returns the from path unchanged
  • from (string, optional): The path we're coming from, or the current pathname. When undefined, defaults to empty string

Returns:

  • (string): The resolved pathname

Resolution Behavior:

  • Absolute paths: When to starts with '/', it's treated as absolute and returned as-is (after normalization)
  • Relative paths: Resolved relative to the from path, with proper handling of:
    • .. segments: Navigate to parent directory
    • . segments: Stay in current directory (removed)
    • Trailing slashes: Preserved when appropriate
  • Empty paths: Empty to returns from unchanged
  • Index paths: Paths ending with '/' are treated as directory paths

Usage Examples:

// Absolute path resolution
resolvePathname('/about', '/company/jobs'); // '/about'

// Relative path resolution
resolvePathname('about', '/company/jobs'); // '/company/about'

// Parent directory navigation
resolvePathname('../jobs', '/company/team/ceo'); // '/company/jobs'

// Multiple parent directory navigation
resolvePathname('../../other', '/company/team/ceo'); // '/other'

// Current directory reference
resolvePathname('.', '/company/jobs'); // '/company/'

// Trailing slash handling
resolvePathname('about', '/company/'); // '/company/about'

// Undefined from parameter (defaults to empty string)
resolvePathname('about'); // 'about'
resolvePathname('/about'); // '/about'

// Edge cases
resolvePathname('', '/company/jobs'); // '/company/jobs'
resolvePathname('../../../../foo', '/a/b'); // '/foo'

docs

index.md

tile.json