如何使用此网页上 span itemprop 行中的纯 JS 生成值？

Question

我正在尝试从没有 id 或 class 值的 Winmo 配置文件（例如https://open.winmo.com/open/decision_makers/ca/pasadena/jorge/garcia/489325 ）解析某些跨度标签，即

<span itemprop="email">j****@***********.com</span>

<div itemscope="" itemprop="address" itemtype="http://schema.org/PostalAddress">

<span itemprop="streetAddress">177 East West Colorado Boulevard</span>

<span itemprop="addressLocality">Pasadena</span>,

<span itemprop="addressRegion">CA</span>

<span itemprop="postalCode">91195</span>

<span itemprop="addressCountry">USA</span>

我发现两个旧的 StackOverflow 示例很有帮助（this和this），但我仍然使用以下代码为网页上的 9 个 span itemprop-matching 行中的每一行获取 null 值：

var nodes=[], values=[];

var els = document.getElementsByTagName('span'), i = 0, whatev;

for(i; i < els.length; i++) {

    prop = els[i].getAttribute('itemprop');

    if(prop) {

        whatev = els[i];

        nodes.push(whatev.nodeName); // provides attribute names, in all CAPS = "SPAN"

        values.push(whatev.nodeValue); // for attribute values, why saying null if els[i] is fine?

        console.log(values); // (whatev) outputs whole thing, but it seems values is what I need

       // break; // need this? seems to prevent values after first span from generating

    }

}

如何从此类页面返回部分隐藏的电子邮件值 (j****@***********.com) 和邮政编码 (91195)？我需要纯 JS 中的解决方案，因为我会将其压缩到其他人的书签中。

Answer 1

您可以从 itemprop 属性中获取分配。像这样的东西：function getItemPropsAsJSON(){&nbsp; var ob = {};&nbsp; Array.from(document.getElementsByTagName('span')).forEach(el=> {&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; var key = el.getAttribute('itemprop');&nbsp; &nbsp; var val = el.innerText;&nbsp; &nbsp; if (key && val) ob[key] = val;&nbsp; });&nbsp; return ob;}/* expected output:&nbsp;&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; "name": "Jorge Garcia - Co-Founder & Chief Technology Officer, ICONIC | Contact Information, Email Address, Phone Number, Budgets and Responsibilities",&nbsp; &nbsp; &nbsp; "email": "j****@***********.com",&nbsp; &nbsp; &nbsp; "telephone": "(347) ***-****",&nbsp; &nbsp; &nbsp; "streetAddress": "177 East West Colorado Boulevard",&nbsp; &nbsp; &nbsp; "addressLocality": "Pasadena",&nbsp; &nbsp; &nbsp; "addressRegion": "CA",&nbsp; &nbsp; &nbsp; "postalCode": "91195",&nbsp; &nbsp; &nbsp; "addressCountry": "USA"&nbsp; &nbsp; }*/如果您在其他地方使用它，您可能希望对键进行规范化，因为 itemprop 属性可能并不总是转换为理想的对象表示法格式。为此，请使用以下命令：function normalizeObjectNotation(key){&nbsp; return key && typeof key == 'string' && /[A-Z]/.test(key) && /\W+/.test(key) == false&nbsp; ? key.trim().split(/(?=[A-Z])/).reduce((a,b)=> a+'_'+b).replace(/^\d+/, '').toLowerCase()&nbsp;&nbsp; : key && typeof key == 'string' ? key.trim().replace(/\W+/g, '_').replace(/^\d+/, '').toLowerCase()&nbsp;&nbsp; : 'failed_object';}function getItemPropsAsJSON(){&nbsp; var ob = {};&nbsp; Array.from(document.getElementsByTagName('span')).forEach(el=> {&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; var key = el.getAttribute('itemprop');&nbsp; &nbsp; var val = el.innerText;&nbsp; &nbsp; if (key && val) ob[normalizeObjectNotation(key)] = val;&nbsp; });&nbsp; return ob;}getItemPropsAsJSON()/* Expected Output:{&nbsp; "name": "Jorge Garcia - Co-Founder & Chief Technology Officer, ICONIC | Contact Information, Email Address, Phone Number, Budgets and Responsibilities",&nbsp; "email": "j****@***********.com",&nbsp; "telephone": "(347) ***-****",&nbsp; "street_address": "177 East West Colorado Boulevard",&nbsp; "address_locality": "Pasadena",&nbsp; "address_region": "CA",&nbsp; "postal_code": "91195",&nbsp; "address_country": "USA"}*/

Answer 2

您可以通过选择器获取电子邮件范围span[itemprop="email"]和邮政编码用同样的方法span[itemprop="postalCode"]使用这些选择器，用于querySelector获取元素，然后提取其textContent：const [email, postalCode] = ['email', 'postalCode'].map(&nbsp; val => document.querySelector(`span[itemprop="${val}"]`).textContent);console.log(email);console.log(postalCode);<span itemprop="email">j****@***********.com</span><div itemscope="" itemprop="address" itemtype="http://schema.org/PostalAddress"><span itemprop="streetAddress">177 East West Colorado Boulevard</span><span itemprop="addressLocality">Pasadena</span>,<span itemprop="addressRegion">CA</span><span itemprop="postalCode">91195</span><span itemprop="addressCountry">USA</span>