posthtml-base-url

Base URL

Prepend a base string to HTML attribute values

Introduction

This PostHTML plugin can prepend a string to various attribute values and CSS styles.

Input:

<img src="test.jpg">

Output:

<img src="https://example.com/test.jpg">

Works on the following attributes:

• src=""
• href=""
• srcset=""
• poster=""
• background=""

... and the following CSS properties:

• background: url()
• background-image: url()

For CSS, it works both inside <style> tags and with inline CSS found in style="" attributes.

Install

$ npm i posthtml posthtml-base-url

Usage

const posthtml = require('posthtml')
const baseUrl = require('posthtml-base-url')

posthtml([
  baseUrl()
])
  .process('<img src="test.jpg">', {url: 'https://example.com', allTags: true})
  .then(result => console.log(result.html))

Result:

<img src="https://example.com/test.jpg">

Absolute URLs

If the value to be replaced is an URL, the plugin will not modify it.

Options

You can configure what to prepend to which attribute values.

url

Type: string
Default: ''

The string to prepend to the attribute value.

allTags

Type: boolean
Default: false

The plugin is opt-in, meaning that by default it doesn't affect any tag.

When you set allTags to true, the plugin will prepend your url to all attribute values in all the tags that it supports.

styleTag

Type: boolean
Default: false

When set to true, the plugin will prepend your url to background: url(...) and background-image: url(...) CSS properties in all <style> tags.

inlineCss

Type: boolean
Default: false

When set to true, the plugin will prepend your url to background: url(...) and background-image: url(...) CSS properties in all style="" attributes.

tags

Type: object
Default: {/*object with select tags to handle*/}

An object that defines tags and their attributes to handle.

When you define tags to handle with the tags option, the plugin will only handle those tags.

For example, the <a> tag here is not prepended to:

posthtml([
  baseUrl()
])
  .process(
    `<a href="foo/bar.html">
      <img src="img.jpg" srcset="img-HD.jpg 2x,img-xs.jpg 100w">
    </a>`, 
    {
      tags: {
        img: {
          src: 'https://foo.com/',
          srcset: 'https://bar.com/',
        },
      },
    }
  )
  .then(result => console.log(result.html))

Result:

<a href="foo/bar.html">
  <img src="https://foo.com/image1.jpg" srcset="https://bar.com/img-HD.jpg 2x, https://bar.com/img-xs.jpg 100w">
</a>

attributes

Type: object
Default: {}

Key-value pairs of attributes and what to prepend to them.

Example:

posthtml([
  baseUrl()
])
  .process(
    '<div data-url="foo/bar.html"></div>', 
    {
      attributes: {
        'data-url': 'https://example.com/',
      }
    }
  )
  .then(result => console.log(result.html))

Result:

<div data-url="https://example.com/foo/bar.html"></div>