Puppeteer抓取元素属性时，如何将style字符串转为嵌套对象？

在现有Puppeteer抓取iframe全量属性的脚本基础上，将style属性对应的整段样式字符串，拆解为键值对形式的嵌套结构化对象输出，完全匹配预期的输出格式。

核心修改思路 #

不需要手写字符串拆分逻辑来解析style内容，直接利用浏览器内置的CSSStyleDeclaration接口读取元素的内联样式数据。这种方式比手动split字符串的容错性高很多，不会因为样式值里夹带分号、多余空格、非规范写法导致解析失准，解析结果和浏览器实际渲染的内联样式完全一致。

完整可运行代码 #

const puppeteer = require('puppeteer');
(async () => {
  const browser = await puppeteer.launch();
  const targetSelectors = ["iframe"]
  const url = 'https://www.loungeincomfort.com.au/'
  const page = await browser.newPage();
  // 补充加载等待配置，避免资源未加载完成时漏抓未渲染的iframe
  await page.goto(url, { waitUntil: 'networkidle2' });
  for (let i = 0; i < targetSelectors.length; i++) {
    const frameAttrs = await page.$$eval(targetSelectors[i], elements => elements.map(el => {
      const attrs = el.getAttributeNames();
      const attrMap = {};
      for (let j = 0; j < attrs.length; j++) {
        const attrName = attrs[j];
        // 针对style属性做单独解析
        if (attrName === 'style') {
          const styleObj = {};
          // 遍历浏览器原生解析完成的内联样式对象，提取所有键值对
          for (let k = 0; k < el.style.length; k++) {
            const stylePropName = el.style[k];
            styleObj[stylePropName] = el.style.getPropertyValue(stylePropName);
          }
          attrMap[attrName] = styleObj;
        } else {
          // 其余属性直接读取原始值存储
          attrMap[attrName] = el.getAttribute(attrName);
        }
      }
      return attrMap;
    }))
    // 格式化输出，提升控制台打印的结构可读性
    console.log(JSON.stringify(frameAttrs, null, 2));
  }
  await browser.close();
})();

关键逻辑说明 #

• 将原代码中嵌套循环的var声明替换为let，避免变量提升导致的作用域污染问题
• 给page.goto补充networkidle2加载等待配置，解决页面资源未加载完成时iframe未渲染导致的抓取遗漏问题
• 对style属性做单独分支处理：不读取getAttribute返回的原始拼接字符串，直接读取DOM元素原生的style解析结果，逐行提取样式属性名和对应值，组装为嵌套对象
• 输出阶段补充JSON格式化参数，让控制台打印的层级结构更清晰

内容的提问来源于stack exchange，提问作者Mohamed Essam