使用 Javascript 从脚本标签中抓取信息

Question

我正在尝试抓取网页上脚本标记中的信息。 我已经知道如何获取这些信息，但我不知道如何将其操作为数据 object。

我可以使用 document.querySelector(x).innerHTML 获取信息。 这是出现的innerHTML（第一部分似乎没有在这里格式化为代码）。

" Y = YUI(YUI_CONFIG).use('squarespace-commerce-analytics',

function(Y) {
  Y.on('domready', function() {
    Y.Squarespace.CommerceAnalytics.checkoutConfirmed({'id':'12345676','orderNumber':'00065','websiteId':'12345678','purchasedCartId':'1234567','testMode':true,'grandTotal':{'currencyCode':'USD','value':3239,'decimalValue':'32.39','fractionalDigits':2},'grandTotalFormatted':'$32.39','subtotal':{'currencyCode':'USD','value':2300,'decimalValue':'23.00','fractionalDigits':2},'subtotalFormatted':'$23.00','taxTotal':{'currencyCode':'USD','value':204,'decimalValue':'2.04','fractionalDigits':2},'taxTotalFormatted':'$2.04','shippingTotal':{'currencyCode':'USD','value':735,'decimalValue':'7.35','fractionalDigits':2},'shippingTotalFormatted':'$7.35','billingDetails':{'customer':{'address':{'city':'New York','region':'NY','country':'United States'}}},'items':[{'sku':'123456','productName':'This is a Product','unitPrice':{'currencyCode':'USD','value':2300,'decimalValue':'23.00','fractionalDigits':2},'quantity':1}]});
  });
});

"

此代码显示了我得到的 innerHTML，我希望将每个数据项（id、orderNumber、productName 等）格式化为 object，以便我可以使用 GTM 更好地跟踪电子商务。 我不确定如何以我需要的方式操作它

Answer 1

如果把所有的'替换成" ，这就是你可以解析的 JSON ，所以如果你用正则表达式匹配checkoutConfirmed到); ，就可以提取出差不多的JSON，转成JSON，然后解析它：

 const html = document.querySelector('script[type="dontexecute"]').innerHTML; const singleQuotedJSON = html.match(/checkoutConfirmed\((.+?)\);/)[1]; const actualJSON = singleQuotedJSON.replace(/'/g, '"'); const obj = JSON.parse(actualJSON); console.log(obj);

 <script type="dontexecute">Y = YUI(YUI_CONFIG).use( 'squarespace-commerce-analytics', function(Y) { Y.on('domready', function() { Y.Squarespace.CommerceAnalytics.checkoutConfirmed({'id':'12345676','orderNumber':'00065','websiteId':'12345678','purchasedCartId':'1234567','testMode':true,'grandTotal':{'currencyCode':'USD','value':3239,'decimalValue':'32.39','fractionalDigits':2},'grandTotalFormatted':'$32.39','subtotal':{'currencyCode':'USD','value':2300,'decimalValue':'23.00','fractionalDigits':2},'subtotalFormatted':'$23.00','taxTotal':{'currencyCode':'USD','value':204,'decimalValue':'2.04','fractionalDigits':2},'taxTotalFormatted':'$2.04','shippingTotal':{'currencyCode':'USD','value':735,'decimalValue':'7.35','fractionalDigits':2},'shippingTotalFormatted':'$7.35','billingDetails':{'customer':{'address':{'city':'New York','region':'NY','country':'United States'}}},'items':[{'sku':'123456','productName':'This is a Product','unitPrice':{'currencyCode':'USD','value':2300,'decimalValue':'23.00','fractionalDigits':2},'quantity':1}]}); }); });</script>

现在您已经有了一个格式良好的 object，您可以随意操作它。 例如，要提取orderNumber ，请参考obj.orderNumber ：

 const html = document.querySelector('script[type="dontexecute"]').innerHTML; const singleQuotedJSON = html.match(/checkoutConfirmed\((.+?)\);/)[1]; const actualJSON = singleQuotedJSON.replace(/'/g, '"'); const obj = JSON.parse(actualJSON); console.log(obj.orderNumber);

 <script type="dontexecute">Y = YUI(YUI_CONFIG).use( 'squarespace-commerce-analytics', function(Y) { Y.on('domready', function() { Y.Squarespace.CommerceAnalytics.checkoutConfirmed({'id':'12345676','orderNumber':'00065','websiteId':'12345678','purchasedCartId':'1234567','testMode':true,'grandTotal':{'currencyCode':'USD','value':3239,'decimalValue':'32.39','fractionalDigits':2},'grandTotalFormatted':'$32.39','subtotal':{'currencyCode':'USD','value':2300,'decimalValue':'23.00','fractionalDigits':2},'subtotalFormatted':'$23.00','taxTotal':{'currencyCode':'USD','value':204,'decimalValue':'2.04','fractionalDigits':2},'taxTotalFormatted':'$2.04','shippingTotal':{'currencyCode':'USD','value':735,'decimalValue':'7.35','fractionalDigits':2},'shippingTotalFormatted':'$7.35','billingDetails':{'customer':{'address':{'city':'New York','region':'NY','country':'United States'}}},'items':[{'sku':'123456','productName':'This is a Product','unitPrice':{'currencyCode':'USD','value':2300,'decimalValue':'23.00','fractionalDigits':2},'quantity':1}]}); }); });</script>

Answer 2

嗨，来自 Google 搜索的开发人员，CertainPerformance 的答案是一般抓取的最佳答案，但如果您只关心在给定的订单确认页面上获取这个特定的 Squarespace 订单详细信息：这是您想要的 object 的快速通道：

Y.Squarespace.CommerceAnalytics._yuievt.events["commerceTrack:commerce-checkout-confirmed"].details[0]

玩得开心！ =)