從網頁提取鏈接

Bun 的 HTMLRewriter API 可用於高效地從 HTML 內容提取鏈接。它通過鏈接 CSS 選擇器來匹配你想要處理的元素、文本和屬性。這是一個如何從網頁提取鏈接的簡單示例。你可以將 Response、Blob 或 string 傳遞給 .transform。

async function extractLinks(url: string) {
  const links = new Set<string>();
  const response = await fetch(url);

  const rewriter = new HTMLRewriter().on("a[href]", {
    element(el) {
      const href = el.getAttribute("href");
      if (href) {
        links.add(href);
      }
    },
  });

  // 等待響應被處理
  await rewriter.transform(response).blob();
  console.log([...links]); // ["https://bun.com", "/docs", ...]
}

// 從 Bun 網站提取所有鏈接
await extractLinks("https://bun.com");

---

將相對 URL 轉換為絕對 URL

在抓取網站時，你經常需要將相對 URL（如 /docs）轉換為絕對 URL。以下是如何處理 URL 解析：

async function extractLinksFromURL(url: string) {
  const response = await fetch(url);
  const links = new Set<string>();

  const rewriter = new HTMLRewriter().on("a[href]", {
    element(el) {
      const href = el.getAttribute("href");
      if (href) {
        // 將相對 URL 轉換為絕對 URL
        try { 
          const absoluteURL = new URL(href, url).href; 
          links.add(absoluteURL);
        } catch { 
          links.add(href); 
        } 
      }
    },
  });

  // 等待響應被處理
  await rewriter.transform(response).blob();
  return [...links];
}

const websiteLinks = await extractLinksFromURL("https://example.com");

---

有關使用 Bun 進行 HTML 轉換的完整文檔，請參閱 文檔 > API > HTMLRewriter。