Javascript-从DIV的内部HTML中提取所有标题

Question

How to extract particular properties from inner HTML in a complete div.

For Ex - I have

[Check the image, I have highlighted the part I want to extract][1]

I want to extract only the last 5 digits number from every ALT="Blah, blah... , 87876 " inside the blue highlighted div

After that i want to put all the values in an array with comma seperated and remove all duplicates.

      var Array = [];

    // solution code

        var values = Array.join(", ");

    alert (values);

// shows up "34322, 23215, 52334, ....., 34123"

Please explain with an example respective to my problem mentioned above.

Answer 1

Your picture didn't show up, but it's easy enough to get the number:

var example = "Blah, blah... , 87876 ";
example.trim().match(/[\d]+$/g)

You can use querySelectorAll to get all elements with an alt attribute:

document.querySelectorAll('.tab-content *[alt]')

Combine these ideas with Array.reduce and you can build a list of all the numbers:

Array.from(document.querySelectorAll('.tab-content *[alt]')).reduce((acc, el) => {
   const match = el.getAttribute('alt').trim().match(/[\d]+$/g);
   if (match) { return acc.concat(match); }
   return acc;
}, []);

Here is a non-es6 version:

var elements = [].slice.call(document.querySelectorAll('.tab-content *[alt]'), 0);
elements.reduce(function(acc, el) {
   const match = el.getAttribute('alt').trim().match(/[\d]+$/g);
   if (match) { return acc.concat(match); }
   return acc;
}, []);

Removing duplicates is easy with es6:

const altNums = Array.from(document.querySelectorAll('.tab-content *[alt]')).reduce((acc, el) => {
   const match = el.getAttribute('alt').trim().match(/[\d]+$/g);
   if (match) { return acc.concat(match); }
   return acc;
}, []);
const unique = [...new Set(altNums)];