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/

相关文章:

javascript - 如何通过鼠标单击获取表格上的坐标

json - 将 JSON 解析为 TListBox

cloudflare - 检测我们是否在 CloudFlare Worker 中以开发模式或生产模式运行

Azure网站IP限制

cloudflare - Cloudflare、R2,如何上传图片?

javascript - 在 cloudflare-worker 服务上解析原始主体(非 NODE)

nuxt.js - Cloudflare Workers 上的 NuxtJs SSR 部署

javascript - 进入-更新-退出模式后节点的 x 和 y 属性丢失

javascript - 将 C# List<string> 转换为 Javascript

javascript - 具有历史的 Reactjs