testing链接是否与外部jQuery / JavaScript?

如何testing链接是外部链接还是内部链接? 请注意:

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

我怀疑答案在位置.href,但解决scheme逃避我。

谢谢!

 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

这个问题仍然有很多的stream量,很多人告诉我这个接受的解决scheme会失败。 正如我所说,这是一个非常快速和肮脏的答案,以显示如何解决这个问题的主要方式。 更复杂的解决scheme是使用可以在<a> (anchor)元素上访问的属性。 就像@Daved在这个答案中已经指出的,关键是将hostname与当前的window.location.hostname进行比较。 我宁愿比较hostname属性,因为如果它不同于80,它们将永远不包括包含在host属性中的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' ); }); 

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

和没有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开头的hrefs(http://,https://)被自动视为本地

这里是一个jQueryselect器只有外部链接:

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

一个仅用于内部链接(不包括同一页面内的哈希链接)的jQueryselect器需要更复杂一点:

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

其他filter可以放在: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/

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

用法:

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

你忘了一个,如果你使用相对path。

例如:/testing

  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(本地和外部)可以使用类“本地下载”或“外部下载”的问题。 但还没有find解决scheme。

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

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

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

另见这篇文章: 从链接的href属性获取完整的URI

对于那些有兴趣的人,我做了一个三元版本的if块,检查一下这个元素有哪些类和哪个类被附加。

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

谷歌分析位可以被忽略,但这是你可能想要做的事情,现在你知道它是什么types的链接。 只需在三元块内添加代码即可。 如果你只想检查一种链接,那么用一个if语句代替三元组。

编辑添加我遇到的问题。 我的一些文件是“/ Courses /”。 我做了一个本地页面的检查,检查是否有在href的开始和结束的斜线。 尽pipe刚开始检查“/”可能就足够了。

我使用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