Get value data and change according to each link?

Question

How to get the value of "data-token" down to "??????????????????" in the script. And it changes with each link? For example:

"Download 01" link uses token: '1111',
"Download 02" link uses token: '2222',
"Download 04" link uses token: '444444',

<a data-token="1111" href="https://example.com/download=12345">Download 01</a>
<a data-token="2222" href="https://example.com/download=123456">Download 02</a>
<a data-token="444444" href="https://example.com/download=123457">Download 04</a>

<script>
window.linkurl = {
token: '??????????????????',
domains: ``,
patterns: `download=`
};
(function() {
    function doHash(el, token) {
        el.href = 'https://example.com/full/?api='
            + token
            + '&url='+btoa(el.href)+'=&type=1';
        console.log(el.href);
    }

    var token = linkurl.token || '';
    var domains = linkurl.domains.split('\n') || [];
    domains.push('example.com');
    domains.push('www.example.com');
    domains.push(location.hostname);
    var patterns = linkurl.patterns.split('\n').filter(function(item) {return Boolean(item)}) || [];
    var aTags = document.querySelectorAll('a[href]:not([href^="javascript"]):not([onclick]):not([ng-click])');
    aTags.forEach(function(el) {
        if (domains.indexOf(el.hostname) === -1) {
            doHash(el, token);
            return;
        }
        patterns.forEach(function(pattern) {
            try {
                var regex = new RegExp(pattern);
                if(regex.test(el.href)) doHash(el, token);
            } catch (e) {console.log(e)}
        });
    });
})();
</script>

Update link: http://jsfiddle.net/Lu8shmco/

Hi, I posted a solution to another persons problem that may help you here. See https://stackoverflow.com/questions/56894812/outputting-an-object-to-a-page-that-keeps-close-function/56895222#56895222 — Spangle, Jul 12 '19 at 06:02
Are you just wanting to get the data attribute value? The question is a little confusing and your code looks a little too complex for what you are trying too do. — Spangle, Jul 12 '19 at 06:23
When you render your links (not sure how you are doing that) do they already have the data-token set? I suggest adding a click event to them, and then get the value with var value = this.dataset.token during the click event. — Spangle, Jul 12 '19 at 06:30

Satpal · Accepted Answer · 2019-07-12T07:49:55.503

You can use Element.dataset property, it provides read/write access to from data-* prefixed custom attributes.

Thus you can get value using

el.dataset.token

window.linkurl = {
  token: '??????????????????',
  domains: ``,
  patterns: `download=`
};

function doHash(el) {
  el.href = 'https://example.com/full/?api=' +
    el.dataset.token +
    '&url=' + btoa(el.href) + '=&type=1';
  console.log(el.href);
}

var domains = linkurl.domains.split('\n') || [];
domains.push('example.com');
domains.push('www.example.com');
domains.push(location.hostname);
var patterns = linkurl.patterns.split('\n').filter(function(item) {
  return Boolean(item)
}) || [];
var aTags = document.querySelectorAll('a[href]:not([href^="javascript"]):not([onclick]):not([ng-click])');
aTags.forEach(function(el) {
  if (domains.indexOf(el.hostname) === -1) {
    doHash(el);
    return;
  }
  patterns.forEach(function(pattern) {
    try {
      var regex = new RegExp(pattern);
      if (regex.test(el.href)) doHash(el);
    } catch (e) {
      console.log(e)
    }
  });
});

<a data-token="1111" href="https://example.com/download=12345">Download 01</a>
<a data-token="2222" href="https://example.com/download=123456">Download 02</a>
<a data-token="444444" href="https://example.com/download=123457">Download 04</a>

Get value data and change according to each link?

1 Answers1