HTMLRewritingStream()

The HTMLRewritingStream lets you rewrite HTML by registering callbacks on CSS selectors. When an element matching the selector is encountered, the rewriter calls your callback. This callback can manipulate the attributes of the element, and add or remove content from the immediate context.

Syntax

new HTMLRewritingStream()

Return value

A new HTMLRewritingStream object.

Examples

In this example, we fetch an HTML page and use the HTML rewriter to add an attribute to all div tags and prepend the text Header: to all h1 tags:

/// <reference types="@fastly/js-compute" />

import { HTMLRewritingStream } from 'fastly/html-rewriter';

async function handleRequest(event) {
  let transformer = new HTMLRewritingStream()
    .onElement("h1", e => e.prepend("Header: "))
    .onElement("div", e => e.setAttribute("special-attribute", "top-secret"));
  let body = (await fetch("https://example.com/")).body.pipeThrough(transformer);

  return new Response(body, {
    status: 200,
    headers: new Headers({
      "content-type": "text/html"
    })
  })
}

addEventListener("fetch", (event) => event.respondWith(handleRequest(event)));