内容脚本从 HTML 中提取数据？

Question

I am trying to parse and extract email data from my Gmail account using a content-script, but since Gmail uses dynamically generated DOM paths the script fails on reload as the path changes. Here is my code:

function extractData() {
    var email = document.querySelector("//*[@id=":1u"]/div[2]/table/tbody/tr/td[2]/table[1]/tbody/tr/td/table/tbody/tr[3]/td/table[2]/tbody/tr/td[2]/div/span[3]/span/a");
    email = email.textContent;
    var amount = document.querySelector("#\\:2k > div:nth-child(2) > table > tbody > tr > td:nth-child(2) > table:nth-child(1) > tbody > tr > td > table > tbody > tr:nth-child(3) > td > table:nth-child(2) > tbody > tr > td:nth-child(2) > div > span:nth-child(4)");
    amount = amount.textContent;
    const regex = /(\$[0-9,]+(\.[0-9]{2})?)/;
    amount = amount.match(regex);
    amount = amount[0].replace('$', '');

    var date = document.querySelector("#\\:2k > div:nth-child(2) > table > tbody > tr > td:nth-child(2) > table:nth-child(1) > tbody > tr > td > table > tbody > tr:nth-child(3) > td > table:nth-child(1) > tbody > tr > td:nth-child(4) > span > span:nth-child(1)");
    date = date.textContent;
    date = date.split(' ');
    date = date[0];

    console.log(email + amount + date);

} 

How to overcome this, I guess using Regex to extract relevant data from html could be an answer but Regex is above my league. The data I need extracted is like this:

You received a payment of {$10.00} USD from {NameHere} ({emailHere})

Need to extract data between the curly braces.

Answer 1

If the email text has always exactly the structure you showed, you can do this:

 const text = "You received a payment of $10.00 USD from Some Person (mail@mail.com)"; const regex = /You received a payment of (.*) USD from (.*) \((.*)\)/; const matches = text.match(regex); const amount = matches[1]; const name = matches[2]; const email = matches[3]; console.log(amount, name, email);

If the text varies, you can find the parts this way (although I wouldn't recommend to do this, specially for the name):

 let text = "You received a payment of $10.00 USD from Some Person (mail@mail.com). But somemail@hotmail.com also sent $500.00 and then $15 more."; const priceRegex = /\$\d+\.?\d*/g; const nameRegex = /([AZ][az]+ [AZ][az]+)/g; const emailRegex = /([a-zA-Z0-9._-]+@[a-zA-Z0-9]+\.[a-zA-Z0-9._-]{2,4}(\.[a-zA-Z0-9._-]+)?)/g; console.log( text.match(priceRegex) ); console.log( text.match(nameRegex) ); console.log( text.match(emailRegex) );