根据匹配部分选择数据属性

Question

How to select all data attributes starting with data-size- in element like this one

<div class="el" data-name="str" data-size-100="str" data-size-158="str" data-size-304="str">str</div>

I'm trying to do something like, but can't figure it out:

$('.el').attr('[data-size-*]') 

Answer 1

You can achieve it by using dataset

var data = $('.el')[0].dataset;
var attrs = Object.keys(data).reduce(function(a,b){
 if(b.startsWith("size")){ a.push(data[b]); }
 return a;
},[]);

console.log(attrs); \\ ["str","str","str"]

Here I used startsWith to determine whether the data-'key' starts with a particular substring or not. Also reduce is to reduce the original key array to a new array based on the condition we have.

DEMO

Answer 2

This one returns an array with objects holding both name and value.

var     myDiv = document.getElementsByClassName("el")[0],
dataSizeAttrs = [];
Array.prototype.forEach.call(myDiv.attributes, e => 
  /data-size/.test(e.nodeName) && dataSizeAttrs.push({name : e.nodeName,
                                                      value: e.nodeValue}) );