Rewrite links on HTML pages

export default {
    async fetch(request) {
        // Define the old hostname here.
        const OLD_URL = "oldsite.com";
        // Then add your new hostname that should replace the old one.
        const NEW_URL = "newsite.com";

        class AttributeRewriter {
            constructor(attributeName) {
                this.attributeName = attributeName;
            }
            element(element) {
                const attribute = element.getAttribute(this.attributeName);
                if (attribute) {
                    element.setAttribute(
                        this.attributeName,
                        attribute.replace(OLD_URL, NEW_URL),
                    );
                }
            }
        }

        const rewriter = new HTMLRewriter()
            .on("a", new AttributeRewriter("href"))
            .on("img", new AttributeRewriter("src"));

        const res = await fetch(request);
        const contentType = res.headers.get("Content-Type");

        // If the response is HTML, it can be transformed with
        // HTMLRewriter -- otherwise, it should pass through
        if (contentType.startsWith("text/html")) {
            return rewriter.transform(res);
        } else {
            return res;
        }
    },
};

Was this helpful?

What did you like?

Accurate

Easy to understand

Solved my problem

Helped me decide to use the product

Other

What went wrong?

Hard to understand

Incorrect information

Missing the information

Other

Thank you for helping improve Cloudflare's documentation!