如何用Puppeteer提取li标签onclick中的URL并整理为指定数组

步骤1：从onclick字符串提取目标URL #

假设你拿到的onclick字符串格式类似"goToProduct('/product/detail?productId=123')"，可以用两种方式提取URL：

正则表达式匹配 #

直接匹配引号包裹的URL内容，适配单/双引号场景：

const onClickStr = "jumpToItem('https://example.com/product?productId=456')";
const urlMatch = onClickStr.match(/['"](.*?)['"]/);
if (urlMatch) {
  const targetPath = urlMatch[1]; // 提取到目标路径
}

字符串分割处理 #

如果onclick格式固定为「函数名(URL)」结构，可通过分割字符串提取：

const onClickStr = "openProduct('/product?productId=789')";
const targetPath = onClickStr.split('(')[1].split(')')[0].replace(/['"]/g, '');

步骤2：拼接完整域名并生成对象数组 #

先确定目标网站的基础域名，将提取到的路径拼接为完整URL，再生成含url字段的对象数组：

const baseDomain = "https://www.target-site.com";
// 假设已收集所有li的onclick字符串到onClickStrings数组
const productUrlList = onClickStrings
  .filter(str => str) // 过滤空值
  .map(onClickStr => {
    const urlMatch = onClickStr.match(/['"](.*?)['"]/);
    if (!urlMatch) return null;
    const fullUrl = new URL(urlMatch[1], baseDomain).href;
    return { url: fullUrl };
  })
  .filter(item => item); // 过滤无效项

完整Puppeteer实操片段 #

结合页面操作的完整逻辑：

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://www.target-site.com/products');

  // 获取所有li的onclick属性值
  const onClickStrings = await page.$$eval('ul li', lis => 
    lis.map(li => li.getAttribute('onclick'))
  );

  // 从当前页面URL自动提取基础域名
  const baseDomain = page.url().split('/').slice(0,3).join('/');
  const productUrlList = onClickStrings
    .filter(str => str)
    .map(onClickStr => {
      const urlMatch = onClickStr.match(/['"](.*?)['"]/);
      if (!urlMatch) return null;
      return { url: new URL(urlMatch[1], baseDomain).href };
    })
    .filter(item => item);

  console.log(productUrlList);
  await browser.close();
})();

特殊场景处理：如果onclick是复杂JS逻辑（非直接传入URL字符串），可在页面上下文模拟执行获取跳转地址：

const targetUrl = await page.evaluate((li) => {
  const originalOpen = window.open;
  let url = '';
  // 拦截window.open获取跳转地址
  window.open = (target) => {
    url = target;
    return { close: () => {} };
  };
  li.onclick();
  window.open = originalOpen;
  return url;
}, liElement);

内容的提问来源于stack exchange，提问作者Omar Giancarlo