使用 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]

玩得開心！ =)