Как я могу сгенерировать значения, используя обычный JS из строк itemprop диапазона на этой веб-странице?

Question

Я пытаюсь проанализировать определенные теги span из профилей Winmo (например, например https://open.winmo.com/open/decision_makers/ca/pasadena/jorge/garcia/489325), которые не имеют значений id или класса, т. Е.

<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 строк совпадений итераций на веб-странице со следующим кодом:

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) и postalCode (91195) с этих типов страниц ? Мне нужно простое решение JS, потому что я буду сжимать его в букмарклет для других.

Answer 1

Вы можете получить назначения из атрибута itemprop.

примерно так:

function getItemPropsAsJSON(){
  var ob = {};
  Array.from(document.getElementsByTagName('span')).forEach(el=> {     
    var key = el.getAttribute('itemprop');
    var val = el.innerText;
    if (key && val) ob[key] = val;
  });
  return ob;
}
/* expected output: 
    {
      "name": "Jorge Garcia - Co-Founder & Chief Technology Officer, ICONIC | Contact Information, Email Address, Phone Number, Budgets and Responsibilities",
      "email": "j****@***********.com",
      "telephone": "(347) ***-****",
      "streetAddress": "177 East West Colorado Boulevard",
      "addressLocality": "Pasadena",
      "addressRegion": "CA",
      "postalCode": "91195",
      "addressCountry": "USA"
    }
*/

Возможно, вы захотите нормализовать ключи, если будете использовать это где-то еще, поскольку атрибуты itemprop не всегда преобразуются в идеальный формат записи объекта. Для этого используйте следующее:

function normalizeObjectNotation(key){
  return key && typeof key == 'string' && /[A-Z]/.test(key) && /\W+/.test(key) == false
  ? key.trim().split(/(?=[A-Z])/).reduce((a,b)=> a+'_'+b).replace(/^\d+/, '').toLowerCase() 
  : key && typeof key == 'string' ? key.trim().replace(/\W+/g, '_').replace(/^\d+/, '').toLowerCase() 
  : 'failed_object';
}

function getItemPropsAsJSON(){
  var ob = {};
  Array.from(document.getElementsByTagName('span')).forEach(el=> {     
    var key = el.getAttribute('itemprop');
    var val = el.innerText;
    if (key && val) ob[normalizeObjectNotation(key)] = val;
  });
  return ob;
}
getItemPropsAsJSON()

/* Expected Output:

{
  "name": "Jorge Garcia - Co-Founder & Chief Technology Officer, ICONIC | Contact Information, Email Address, Phone Number, Budgets and Responsibilities",
  "email": "j****@***********.com",
  "telephone": "(347) ***-****",
  "street_address": "177 East West Colorado Boulevard",
  "address_locality": "Pasadena",
  "address_region": "CA",
  "postal_code": "91195",
  "address_country": "USA"
}

*/

Answer 2

Вы можете получить диапазон электронной почты с помощью селектора

span[itemprop="email"]

и postalCode тем же методом

span[itemprop="postalCode"]

С этими селекторами используйте querySelector, чтобы добраться до элемента , затем извлеките его textContent:

const [email, postalCode] = ['email', 'postalCode'].map(
  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>