如何使用HTMLRewrite更新属性？_Html_Cloudflare Workers

如何使用HTMLRewrite更新属性？

html

如何使用HTMLRewrite更新属性？,html,cloudflare-workers,Html,Cloudflare Workers,我是Cloudflare工作人员中的新手，我正在尝试了解代码。我目前正试图理解HTMLRewriter API，但很难完美地执行代码假设我有下面给出的代码 const html = `<!DOCTYPE html> <body> <h1>Hello World</h1> </body>` async function handleRequest(request) {

我是Cloudflare工作人员中的新手，我正在尝试了解代码。我目前正试图理解HTMLRewriter API，但很难完美地执行代码

假设我有下面给出的代码

      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))
      })

任何关于这方面的信息都是非常感谢的！我主要在寻找一些关于如何在我给出的常量“html”上调用HTMLRewriter并更新“h1”标记的说明。

通常，当您有这样一个常量html字符串时，

HTMLRewriter

不是正确的用法

HTMLRewriter

的名声在于它以流式方式运行，因此它可以在从您的源代码到客户端的流式传输过程中重写HTML。但是如果HTML是在worker中生成的，那么它就不是真正的流。所有内容都在本地可用，您不妨一次将其全部写出。（这有点过于简单，但基本上是正确的。）

例如，您可以使用以下函数替换常量HTML：

函数生成HTML（H1内容）{
返回`
${h1Content}
`
}

这在H1中构造具有任意内容的HTML，而不使用

HTMLRewriter

。对于更复杂的用例，有许多模板库的选择，它们可能非常适合这里

综上所述，如果您真的想在本例中使用

HTMLRewriter

，技巧是首先从静态HTML构建

响应

对象，然后使用

HTMLRewriter

对其进行转换：

异步函数handleRequest（req）{ const res=新响应（html{ 标题：{ “内容类型”：“文本/html；字符集=UTF-8”， }, }) 返回新的HTMLRewriter（）.on（“h1”，new ElementHandler（））.transform（res） }

你说得对，如果我的代码中已经有HTML代码片段，那么尝试使用HTMLRewrite就没有那么有用了，但我正试图理解这个API的细节，所以我想从本地HTML代码开始。谢谢你的回复，我会尝试运行现在！

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

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