如何捕获隐藏为特定元素的 textContent 的 object/array 中的数据？

Question

<div id="ProductModal_10207555">
  <span class="ari-form">
    <span class="datasource hidden">  
      "{
         "itemid": "REF12345",
         "locationid": "54321",
         "leadValue": 15149,
         "productSku": "SKU12345",
         "itemYear": "2019",
         "itemMake": "Adidas",
         "itemModel": "Ultraboost",
         "itemPrice": "9.00",
       }"
    </span>
  </span>
</div>

这是表单中的隐藏对象，我想提取其中的数据。当我尝试进行 DOM 抓取时，我得到了一个字符串值，它只显示了我在该特定对象中看到的所有文本。

"{"itemid": "REF12345","locationid": "54321","leadValue": 15149,"productSku": "SKU12345","itemYear": "2019","itemMake": "Adidas","itemModel": "Ultraboost","itemPrice": "9.00",}"

我希望从中捕获“ itemYear ”、“ itemMake ”和“ itemModel ”，并希望将整个字符串发送到 Google 标签管理器的数据层，我可以在其中捕获每个这些变量及其值分别在 Google 跟踪代码管理器中。有没有办法通过本机 javascript 执行此操作，因为这是 GTM 支持的语言？

站点内还有其他 span class="datasource hidden" 所以我特意将父元素放在那里，因为这是我们识别元素的方式.

对不起，如果这可能是一个快速的。我还在学习。谢谢。

Answer 1

它的格式是 JSON 除了开头和结尾的 " 以及 , 之前 }，所以一旦得到元素的textContent，就可以切出"s，最后一个逗号，然后解析：

const { textContent } = document.querySelector('#ProductModal_10207555 .datasource.hidden');
const json = textContent.match(/{[\s\S]+(?=,)/)[0] + '}';
const obj = JSON.parse(json);

console.log(
  obj.itemYear,
  obj.itemMake,
  obj.itemModel
);

<div id="ProductModal_10207555">
  <span class="ari-form">
    <span class="datasource hidden">  
      "{
         "itemid": "REF12345",
         "locationid": "54321",
         "leadValue": 15149,
         "productSku": "SKU12345",
         "itemYear": "2019",
         "itemMake": "Adidas",
         "itemModel": "Ultraboost",
         "itemPrice": "9.00",
       }"
    </span>
  </span>
</div>

{.+(?=,)表示：匹配一个{，然后匹配尽可能多的字符，直到走到最后一个,.

这是一种非常奇怪的数据存储方式。普通 JSON 会更有意义。

或者，对于 ES5 中的等价物：

var textContent = document.querySelector('#ProductModal_10207555 .datasource.hidden').textContent;
var json = textContent.match(/{[\s\S]+(?=,)/)[0] + '}';
var obj = JSON.parse(json);

console.log(
  obj.itemYear,
  obj.itemMake,
  obj.itemModel
);

<div id="ProductModal_10207555">
  <span class="ari-form">
    <span class="datasource hidden">  
      "{
         "itemid": "REF12345",
         "locationid": "54321",
         "leadValue": 15149,
         "productSku": "SKU12345",
         "itemYear": "2019",
         "itemMake": "Adidas",
         "itemModel": "Ultraboost",
         "itemPrice": "9.00",
       }"
    </span>
  </span>
</div>

如何捕获隐藏为特定元素的 textContent 的 object/array 中的数据？

How do I capture the data within an object/array that is hidden as a textContent of a specific element?

javascript

function

ajaxform

google-tag-manager

google-datalayer