javascript - 访问 HTMLRewriter 中的嵌套元素 - Cloudflare Workers

标签 javascript cloudflare cloudflare-workers

我必须使用 HTMLRewriter 访问嵌套元素在 Cloudflare 工作人员中。
例子

<div data-code="ABC">
   <div class="title">Title</div>
   <div class="price">9,99</div>
</div>
<div data-code="XYZ">
   <div class="title">Title</div>
</div>
我正在考虑使用多个 .on() 但订单没有保留,因为缺少一些 .price 并且我无法正确合并 codeHandler 和 PriceHandler 的结果
await new HTMLRewriter().on("[data-code]", codeHandler)
                        .on(".price", priceHandler)
                        .transform(response).arrayBuffer()
我正在考虑多次迭代 new HTMLRewriter() 但可读流被锁定。
当前代码
worker
class codeHandler {
    constructor() {
        this.values = []
    }

    element(element) {
        let data = {
            code: element.getAttribute("data-code"),
            title: element.querySelector(".title").innerText, <--
            price: element.querySelector(".price").innerText, <--- HERE
        }
        this.values.push( data )
    }
}


const url = "https://www.example.com"

async function handleRequest() {

  const response = await fetch(url)

   const codeHandler = new codeHandler()
   await new HTMLRewriter().on("[data-code]", codeHandler).transform(response).arrayBuffer()
    
    
   console.log(codeHandler.values)

    const json = JSON.stringify(codeHandler.values, null, 2)


    return new Response(json, {
        headers: {
        "content-type": "application/json;charset=UTF-8"
        }
    })  

}

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

最佳答案

快速查看文档后,似乎 element objects in the HTMLRewriter API目前受到限制,并且无法以您喜欢的方式访问 child 。
似乎处理程序的运行顺序与文档中出现的顺序相同,这意味着对于您的用例,您可以跟踪当前元素并在该上下文中添加数据。您可以使用不同的处理程序通过使用闭包(在本例中为 values)来访问相同的数据,如下所示:

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

async function handleRequest(request) {
  var values = [];
  var response = await fetch(request);
  function addToLast(attr, text) {
    var lastIndex = values.length - 1;
    if (lastIndex < 0) {
      // this shouldn't happen, since there should always have been
      // an object created by the parent [data-code] div
      return;
    }
    // need to add them to the previous value, just in case if there
    // are multiple text chunks
    values[lastIndex][attr] = (values[lastIndex][attr] || '') + text;
  }
  await new HTMLRewriter()
    .on("[data-code]", { 
      element(element) { 
        values.push({
          code: element.getAttribute("data-code")
        });
      },
      text(text) {
        addToLast('body', text.text);
      }
    })
    .on("[data-code] .title", {
      text(text) {
        addToLast('title', text.text);
      }
    })
    .on("[data-code] .price", {
      text(text) {
        addToLast('price', text.text);
      }
    })
    .transform(response).arrayBuffer();
  const json = JSON.stringify(values, null, 2)
  return new Response(json, {
    headers: {
      "content-type": "application/json;charset=UTF-8"
    }
  });
}
另请注意,您可以使用 descendant combinator (例如 [data-code] .title )以确保唯一的 .title处理的 div 是具有 [data-code] 的元素的子元素.

关于javascript - 访问 HTMLRewriter 中的嵌套元素 - Cloudflare Workers,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/68114819/

相关文章:

cloudflare - 如何修复 cloudflare 中的身份验证错误代码 10000

javascript - 当使用 www 时,我没有得到 api 结果,如果没有 www 使用,我会得到它们

javascript - AngularJS 循环通过 http get req 找到正确的 url

api - cloudflare - SSL 错误

ssl - PhpMyAdmin 滑动 &lt;style&gt;html{display :none;}&lt;/style&gt; into <head> tag after adding https and cloudflare?

cloudflare - 绕过 Cloudflare 的上传最大值

cloudflare-workers - Cloudflare 工作人员 : How to modify a response body like a string?

javascript - ReactDom createPortal() 不起作用,但 render() 起作用,并且只有重复触发时才会起作用 - 这是为什么?

javascript - 如何触发点击事件以在谷歌地图绘图管理器功能中选择每个图?

cloudflare - 在开发过程中,如何在本地运行我的 cloudflare Worker 无服务器功能?