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

Question

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

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

我怀疑答案位于location.href的某处，但解决方案无视我。

谢谢！

Answer 1

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性质，因为他们从来没有包括其中包含的host财产，如果从80

不同的port所以在这里，我们去：艺术的

$('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 2

是的，我相信你可以检索当前的域名与location.href。另一种可能性是创建一个链接元素，将src设置为/，然后检索规范URL（如果您使用一个URL而不一定是域名，将检索基本URL）。

也看到这个帖子：Get the full URI from the href property of a link

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")); 
} 

周

所有的HREF不开始http（HTTP：//，https：//开头）：

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

Answer 4

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

使用自动处理路径。

forexample：/测试

 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 5

你忘了一个，如果您使用的是相对什么地方

Answer 6

我知道这个帖子是旧的，但它仍然显示在结果的顶部，所以我想提供另一种方法。我看到了一个锚元素的所有正则表达式检查，但为什么不使用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 7

这里有一个jQuery选择只有外部链接：

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

jQuery选择仅适用于内部链接（不包括泸定在同一页内的散列链接）需要一个比较复杂：

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

附加过滤器可以被放置在:not()条件内，并根据需要通过额外的逗号分隔。

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

---

或者，我们可以筛选使用香草的JavaScript href属性，它始终是一个绝对URL的内部链接：

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

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

Answer 8

对于那些有兴趣，我做了一个带有检查的if块的三元版本，以查看该元素具有哪些类别以及哪些类别s被附上。

$(document).ready(function() { 
    $("a").click(function (e) { 

     var hostname = new RegExp(location.host); 
     var url = $(this).attr("href"); 

     hostname.test(url) ? 
     $(this).addClass('local') : 
     url.slice(0, 1) == "/" && url.slice(-1) == "/" ? 
     $(this).addClass('localpage') : 
     url.slice(0, 1) == "#" ? 
     $(this).addClass('anchor') : 
     $(this).addClass('external'); 

     var classes = $(this).attr("class"); 

     console.log("Link classes: " + classes); 

     $(this).hasClass("external") ? googleAnalytics(url) : 
     $(this).hasClass("anchor") ? console.log("Handle anchor") : console.log("Handle local"); 

    }); 
}); 

的谷歌分析位被忽略，但是这是你可能会喜欢做一些与URL现在你知道它是什么类型的链接。只需在三元块内添加代码即可。 如果您只想检查1种链接，则用if语句替换三元组。

编辑添加我遇到的问题。我的一些hrefs是“/ Courses /”。我做了一个本地页面的检查，检查href的开始和结尾是否有斜线。虽然刚开始时检查'/'可能就足够了。

Answer 9

您可以使用is-url-external模块。

var isExternal = require('is-url-external'); 
isExternal('http://stackoverflow.com/questions/2910946'); // true | false 

Answer 10

我用这个函数的jQuery：

$.fn.isExternal = function() { 
    var host = window.location.host; 
    var link = $('<a>', { 
    href: this.attr('href') 
    })[0].hostname; 
    return (link !== host); 
}; 

用法为：$('a').isExternal();

例子：https://codepen.io/allurewebsolutions/pen/ygJPgV