如何排除具有特定href的锚标签？答案

【问题标题】：How to exclude an anchor tag with a certain href?如何排除具有特定href的锚标签？
【发布时间】：2019-08-29 22:24:45
【问题描述】：

我有一个采用 UTM 和其他 url 参数的 JS 代码，因此当用户在页面之间导航时，我不会失去他们的踪迹。当 href 是一个页面时，代码运行良好，但与 id 元素相关时则不然

我尝试在if语句中排除它或者在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;
      }
    });
})();

所以它正在搜索每个锚标记，并在页面 uri 之后代码插入当前 URL 具有的参数。问题是它会插入代码，即使它是一个 id 调用 <a href="#top"></a> 并且调用不再起作用，因为参数不是在之后插入而是在中间插入，如下所示： 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

【问题讨论】：

嗨，也许将 URL 拆分为 # 以获取基本 URL 并在各部分之间插入新参数？

标签： javascript jquery dom

【解决方案1】：

您可以尝试在您的querySelectorAll 上使用attribute selector，如下所示：

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

这将选择href 属性不以# 开头的所有a 标记。

当然，您可以尝试根据自己的需要进行修改。

【讨论】：