jQuery - get data value with regex

Question

I have html tags like this:

<il class="currItem" data-sourcemp3="http://**">
<il class="currItem" data-sourcemp4="http://**">

And i want get this data value, Even if this mp3 or mp4 I wrote:

var A = $('.currItem').attr("data-source(.+)")
console.log(A);

Or:

var srcName = new RegExp(/data-source.+/g);
var A = $('.currItem').attr(srcName)
console.log(A);

And i get "undefined"

How i do it? Thanks in advance

This may help: http://stackoverflow.com/questions/4187032/get-list-of-data-attributes-using-javascript-jquery — Pete, Apr 21 '16 at 11:07

score 2 · Answer 1 · edited May 23 '17 at 11:59

This is one of those situations where jQuery doesn't help you much. Probably simplest just to loop through the attributes, which are a NamedNodeMap:

var value;
var attrs = $('.currItem')[0].attributes;
for (var n = 0; n < attrs.length; ++n) {
    if (/^data-source.+$/.test(attrs[n].name)) {
        value = attrs[n].value;
        break;
    }
}

Example:

$(".currItem").click(function() {
  var value = "(not found)";
  var attrs = this.attributes;
  for (var n = 0; n < attrs.length; ++n) {
    if (/^data-source.+$/.test(attrs[n].name)) {
      value = attrs[n].value;
      break;
    }
  }
  alert("Value: " + value);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Click a list item below:
<ul>
  <li class="currItem" data-sourcemp3="http://**">xxxxx</li>
  <li class="currItem" data-sourcemp4="http://**">xxxxx</li>
</ul>

Or you could loop over the attributes in many other ways, it's an array-like object.

score 1 · Accepted Answer · answered Apr 21 '16 at 11:13

You can use dataset to get the list of all the data-* attributes present on an element and then iterate over all of them.

Demo

// Select all the elements having the class
var allEl = document.querySelectorAll('.currItem');

// Regex for data attribute
var regex = /^sourcemp\d+$/;

// Iterate over all the elements
for (var i = 0; i < allEl.length; i++) {
    // Get the list of all available data-* attributes on current item
    var data = Object.keys(allEl[i].dataset);

    // Iterate over the all data-* attributes
    for (var j = 0; j < data.length; j++) {
        // Check if this is the data attribute we're interested in
        if (regex.test(data[j])) {
            // Get value of the it
            var value = allEl[i].getAttribute('data-' + data[j]);
            console.log(value);
        }
    }
}

var allEl = document.querySelectorAll('.currItem');
var regex = /^sourcemp\d+$/;

for (var i = 0; i < allEl.length; i++) {
    var data = Object.keys(allEl[i].dataset);
    for (var j = 0; j < data.length; j++) {
        if (regex.test(data[j])) {
            var value = allEl[i].getAttribute('data-' + data[j]);
            console.log(value);
          
            // For Demo
            document.body.innerHTML += '<br />Data attribute = ' + data[j] + ' value = ' + value;
        }

    }
}

<il class="currItem" data-sourcemp3="http://**"></il>
<il class="currItem" data-sourcemp4="http://Test.this"></il>

jQuery - get data value with regex

2 Answers2