使用jQuery/javascript测试链接是否在外部？

Question

如何测试链接是外部链接还是内部链接？请注意:

1. 我无法对本地域进行硬编码.
2. 我无法测试"http".我可以通过http绝对链接轻松链接到我自己的网站.
3. 我想使用jQuery/javascript,而不是css.

我怀疑答案位于location.href的某个地方,但解决方案避开了我.

谢谢!

Answer 1

我知道这篇文章很老但它仍然显示在结果的顶部,所以我想提供另一种方法.我看到所有正则表达式检查一个锚元素,但为什么不使用window.location.host和检查元素的host属性？

function link_is_external(link_element) {
    return (link_element.host !== window.location.host);
}

使用jQuery:

$('a').each(function() {
    if (link_is_external(this)) {
        // External
    }
});

并使用普通的javascript:

var links = document.getElementsByTagName('a');
for (var i = 0; i < links.length; i++) {
    if (link_is_external(links[i])) {
        // External
    }
}

Answer 2

var comp = new RegExp(location.host);

$('a').each(function(){
   if(comp.test($(this).attr('href'))){
       // a link that contains the current host           
       $(this).addClass('local');
   }
   else{
       // a link that does not contain the current host
       $(this).addClass('external');
   }
});

注意:这只是一个快速而肮脏的例子.它会将所有href ="#anchor"链接匹配为外部链接.可以通过执行一些额外的RegExp检查来改进它.

更新2016-11-17

这个问题仍然有很多流量,很多人告诉我,这个接受的解决方案会在几次失败.正如我所说,这是一个非常快速和肮脏的答案,以显示如何解决这个问题的主要方式.更复杂的解决方案是使用<a>(锚)元素上可访问的属性.就像@Daved在这个答案中已经指出的那样,关键是要比较hostname当前的情况window.location.hostname.我更愿意比较hostname属性,因为它们从不包括属性中port包含的host属性,如果它与80不同.

所以我们走了:

$( 'a' ).each(function() {
  if( location.hostname === this.hostname || !this.hostname.length ) {
      $(this).addClass('local');
  } else {
      $(this).addClass('external');
  }
});

最先进的:

Array.from( document.querySelectorAll( 'a' ) ).forEach( a => {
    a.classList.add( location.hostname === a.hostname || !a.hostname.length ? 'local' : 'external' );
});

Answer 3

并且没有jQuery的方式

var nodes = document.getElementsByTagName("a"), i = nodes.length;
var regExp = new RegExp("//" + location.host + "($|/)");
while(i--){
    var href = nodes[i].href;
    var isLocal = (href.substring(0,4) === "http") ? regExp.test(href) : true;
    alert(href + " is " + (isLocal ? "local" : "not local"));
}

所有不以http(http://,https://)开头的href都会自动视为本地

Answer 4

var external = RegExp('^((f|ht)tps?:)?//(?!' + location.host + ')');

用法:

external.test('some url'); // => true or false

Answer 5

这是一个只有外部链接的jQuery选择器:

$('a[href^="(http:|https:)?//"])') 

仅用于内部链接(不包括同一页面中的哈希链接)的jQuery选择器需要更复杂一些:

$('a:not([href^="(http:|https:)?//"],[href^="#"],[href^="mailto:"])')

可以在:not()条件内放置其他过滤器,并根据需要使用其他逗号分隔.

http://jsfiddle.net/mblase75/Pavg2/

或者,我们可以使用vanilla JavaScript href属性过滤内部链接,该属性始终是绝对URL:

$('a').filter( function(i,el) {
    return el.href.indexOf(location.protocol+'//'+location.hostname)===0;
})

http://jsfiddle.net/mblase75/7z6EV/

Answer 6

你忘了一个,如果你使用相对路径会怎么样.

例如:/ test

        hostname = new RegExp(location.host);
            // Act on each link
            $('a').each(function(){

            // Store current link's url
            var url = $(this).attr("href");

            // Test if current host (domain) is in it
            if(hostname.test(url)){
               // If it's local...
               $(this).addClass('local');
            }
            else if(url.slice(0, 1) == "/"){
                $(this).addClass('local'); 
            }
            else if(url.slice(0, 1) == "#"){
                // It's an anchor link
                $(this).addClass('anchor'); 
            }
            else {
               // a link that does not contain the current host
               $(this).addClass('external');                        
            }
        });

还存在文件下载.zip(本地外部)的问题,可以使用"本地下载"或"外部下载"类.但是还没有找到解决方案.

Answer 7

const isExternalLink = (url) => {
    const tmp = document.createElement('a');
    tmp.href = url;
    return tmp.host !== window.location.host;
};

// output: true
console.log(isExternalLink('https://foobar.com'));
console.log(isExternalLink('//foobar.com'));

// output: false
console.log(isExternalLink('https://www.stackoverflow.com'));
console.log(isExternalLink('//www.stackoverflow.com'));
console.log(isExternalLink('/foobar'));
console.log(isExternalLink('#foobar'));

使用这种方法的好处是：

• 它会自动解析hostname相对路径和片段；
• 它适用于protocol-relativeURL

为了证明这一点，让我们看一下以下示例：

const lnk = document.createElement('a');
lnk.href = '/foobar';

console.log(lnk.host); // output: 'www.stackoverflow.com'

const lnk = document.createElement('a');
lnk.href = '#foobar';

console.log(lnk.host); // output: 'www.stackoverflow.com'

const lnk = document.createElement('a');
lnk.href = '//www.stackoverflow.com';

console.log(lnk.host); // output: 'www.stackoverflow.com'