How do I use HTMLRewrite to update the attributes?

Question

How do I use HTMLRewrite to update the attributes?

733 views Asked by GuyNextWindow At 11 September 2024 at 15:47

I am new to Cloudflare's Workers and I'm trying to play around to understand the code. I'm currently trying to understand the HTMLRewriter API and I'm having a hard time executing the code perfectly.

So suppose I have the code given below.

      const html = `<!DOCTYPE html>
      <body>
      <h1>Hello World</h1>
      </body>`

      async function handleRequest(request) {
        return new Response(html, {
          headers: {
            "content-type": "text/html;charset=UTF-8",
          },
        })
      }

      addEventListener("fetch", event => {
        return event.respondWith(handleRequest(event.request))
      })

This code basically responds to the 'event' as an HTML that we have mentioned. Now I want to call the HTMLRewrite on our 'html' and update some values before returning a response. I have two main questions here: 1. Can I target the h1 tag and update the value inside it? That is, change "Hello World" to something else? 2. How do I append the following code to my program so the input it takes is the const 'html'?

           async function handleRequest(req) {
                const res = await fetch(req)

                return new HTMLRewriter().on("h1", new ElementHandler()).transform(res)
           }

Any information regarding this is highly appreciated! I'm mainly looking for some kind of instructions on how to call the HTMLRewriter on the const 'html' I've given and update the 'h1' tag.

Original Q&A

There are 1 answers

**Kenton Varda** · Answer 1 · 2020-10-19 19:43:57

Usually, when you have a const HTML string like this, HTMLRewriter is not the right thing to use. HTMLRewriter's claim to fame is that it operates in a streaming way, so it can rewrite HTML as it streams through from your origin to the client. But if the HTML is generated in your worker, then it's not really streaming. All of the content is available locally and you might as well write it out all at once. (This is slightly oversimplified, but basically true.)

For example, you could replace your constant HTML with a function like:

function generateHtml(h1Content) {
  return `<!DOCTYPE html>
<body>
  <h1>${h1Content}</h1>
</body>`
}

This constructs HTML with arbitrary content in the H1 without using HTMLRewriter. For more complicated use cases, there are many choices of template libraries out there that might be a good fit here.

With all that said, if you really want to use HTMLRewriter for this case, the trick is to construct a Response object from your static HTML first, then use HTMLRewriter to transform it:

async function handleRequest(req) {
  const res = new Response(html, {
    headers: {
      "content-type": "text/html;charset=UTF-8",
    },
  })

  return new HTMLRewriter().on("h1", new ElementHandler()).transform(res)
}

TechQA.

How do I use HTMLRewrite to update the attributes?

There are 1 answers

Related Questions in HTML

Related Questions in CLOUDFLARE-WORKERS

Popular Questions

Popular Tags

Trending Questions