如何捕获隐藏为文本的对象/数组中的数据特定元素的内容?

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": "$139.00",
}"
</span>
</span>
</div>

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

">

{"itemid"： "REF12345"，"locationid"： "54321"，"leadValue"： 15149，"产品Sku"： "SKU12345"，"项目年份"： "2019"，"项目制造"： "阿迪达斯"，"itemModel"： "Ultraboost"，"itemPrice"： "$139.00"，}">

我希望从中捕获的是" itemYear， "itemMake "和" itemModel"，并希望将整个字符串发送到Google跟踪代码管理器的数据层中，我可以在其中捕获每个变量及其值在Google跟踪代码管理器中。有没有办法通过原生javascript来做到这一点，因为这是GTM支持的语言？

站点中还有其他span class="数据源隐藏">，所以我特意将父项放在那里，因为这是我们识别元素的方式。

抱歉，如果这可能是一个快速的。我还在学习。谢谢。

Answer 1

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

const { textContent } = document.querySelector('#ProductModal_10207555 .datasource.hidden');
const json = textContent.match(/{[sS]+(?=,)/)[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": "$139.00",
}"
</span>
</span>
</div>

{.+(?=,)的意思是：匹配一个{，然后匹配尽可能多的字符，直到到达最后一个,。

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

或者，对于 ES5 中的等效项：

var textContent = document.querySelector('#ProductModal_10207555 .datasource.hidden').textContent;
var json = textContent.match(/{[sS]+(?=,)/)[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": "$139.00",
}"
</span>
</span>
</div>