如何排除具有特定 href 的锚标记？

Question

I've a JS code that take the UTM and other url parameter so when the user navigate between pages I don't lose their track. The code is working great when the href is a page but not when it's related to an id element

I tried to exclude it in the if statement or to add the parameters after the id.

function getRefQueryParam(name) {
    name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
    var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
    var results = regex.exec(location.search);
    return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
};

var utmParamQueryString = '',
    utmParamQueryStringTrimmed = '',
    utm_source = '',
    utm_medium = '',
    utm_content = '',
    utm_campaign = '',
    utm_term = '';

(function() {
    utm_source = getRefQueryParam("utm_source");
    utm_medium = getRefQueryParam("utm_medium");
    utm_content = getRefQueryParam("utm_content");
    utm_campaign = getRefQueryParam("utm_campaign");
    utm_term = getRefQueryParam("utm_term");
    gclid = getRefQueryParam("gclid");
    fbclid = getRefQueryParam("fbclid");

    if (utm_source) {
        utmParamQueryString += '&utm_source=' + utm_source;
    }
    if (utm_medium) {
        utmParamQueryString += '&utm_medium=' + utm_medium;
    }
    if (utm_content) {
        utmParamQueryString += '&utm_content=' + utm_content;
    }
    if (utm_campaign) {
        utmParamQueryString += '&utm_campaign=' + utm_campaign;
    }
    if (utm_term) {
        utmParamQueryString += '&utm_term=' + utm_term;
    }
    if (gclid) {
        utmParamQueryString += '&gclid=' + gclid;
    }
    if (fbclid) {
        utmParamQueryString += '&fbclid=' + fbclid;
    }

    if(utmParamQueryString.length > 0) {
        utmParamQueryString = utmParamQueryString.substring(1);
        utmParamQueryStringTrimmed = utmParamQueryString;
        utmParamQueryString = utmParamQueryString;
    }
    if (!utmParamQueryString) return;
    var navLinks = document.querySelectorAll('a');

    navLinks.forEach(function(item) {
      if (item.href.indexOf('/') === 0 || item.href.indexOf(location.host) !== -1 ) {
        if (item.href.indexOf('?') === -1) {
            item.href += '?';
        } else {
          item.href += '&';
        }
        item.href += utmParamQueryString;
      }
    });
})();

So it's searching every anchor tag and after the page uri the code insert the parameters that the current URL have. The issue is that it inserts code even what it's an id call <a href="#top"></a> and the call doesn't work anymore because the parameters isn't insert after but in between like so: utm_source=google&utm_medium=cpc&utm_campaign=test_cpc&utm_term=test #top &utm_source=google&utm_medium=cpc&utm_campaign=test_cpc&utm_term=test

Answer 1

You can try use attribute selector on your querySelectorAll like this:

document.querySelectorAll('a:not([href^="#"])')

This will pick all a tags that the href attribute does not start with # .

You can, of course, try and modify it based on your needs.