0

我是 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 形式响应“事件”。现在我想在我们的 'html' 上调用 HTMLRewrite 并在返回响应之前更新一些值。我在这里有两个主要问题： 1. 我可以定位 h1 标签并更新其中的值吗？也就是说，将“Hello World”更改为其他内容？2. 如何将以下代码附加到我的程序中，以便输入是 const 'html'？

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

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

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

4

1 回答 1

2

通常，当你有一个像这样的 const HTML 字符串时，HTMLRewriter是不适合使用的。HTMLRewriter的名声在于它以流式方式运行，因此它可以重写 HTML，因为它从您的源流向客户端。但是，如果 HTML 是在您的工作人员中生成的，那么它并不是真正的流式传输。所有内容都在本地可用，您不妨一次将其全部写出来。（这有点过于简单了，但基本上是正确的。）

例如，您可以将常量 HTML 替换为如下函数：

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

这会在 H1 中构造具有任意内容的 HTML，而无需使用HTMLRewriter. 对于更复杂的用例，有许多模板库可供选择，它们可能非常适合。

话虽如此，如果你真的想在HTMLRewriter这种情况下使用，诀窍是Response首先从你的静态 HTML 构造一个对象，然后使用HTMLRewriter它来转换它：

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)
}
于 2020-10-19T19:43:57.813 回答