Uso de jQuery para verificar si un enlace es interno o externo

Question

Quiero escribir un script que pueda determinar si un enlace es interno o externo. Esto es simple desde mi punto de vista, todos los enlaces internos son relativos, por lo que comienzan con un /. Todos los enlaces externos comienzan con un http: // - todo bien hasta el momento. Sin embargo, no puedo entender cómo hacer un ': contains()' en cualquier cosa que no sea texto, ¿cómo se puede buscar una cadena dentro de un atributo?

Una vez que pueda hacer esto estoy feliz de agregar objetivo _blank mí mismo, a menos que sepa una mejor manera de hacerlo

Answer 1

Usted podría utilizar la sintaxis attribute^=value encontrar hrefs que comienzan con http o /:

$("a[href^='http']") // external 

$("a[href^='/']") // internal 

---

Aquí es una solución mejor: puede añadir $('a:external') y $('a:internal') selectores de jQuery con el código del plugin a continuación. Cualquier URL que comienza http://, https:// o whatever:// se considera externa.

$.expr[':'].external = function (a) { 
     var PATTERN_FOR_EXTERNAL_URLS = /^(\w+:)?\/\//; 
     var href = $(a).attr('href'); 
     return href !== undefined && href.search(PATTERN_FOR_EXTERNAL_URLS) !== -1; 
    }; 

    $.expr[':'].internal = function (a) { 
     return $(a).attr('href') !== undefined && !$.expr[':'].external(a); 
    }; 

Answer 2

estoy usando WordPress para mi CMS, y por lo tanto la mayoría (si no todos) de mis enlaces internos comienzan con "http". He encontrado una solución bastante interesante aquí: http://www.focal55.com/blog/jquery-tutorial-add-class-all-outbound-links-your-site

En caso de que el sitio está abajo, que básicamente se reduce a este selector (he modificado un poco):

$('a[href^="//"],a[href^="http"]') 
    .not('[href*="' + window.location.hostname + '"]') 
; 

Tenga en cuenta que este selector se not be the fastest según los documentos jQuery.

Answer 3

que utilizar éste para encontrar todas las direcciones URL que apunta a domain other than current domain o uno con (html5 obsoleta) attribute target="_blank"

var contrastExternalLinks = function() { 
    //create a custom external selector for finding external links 
    $.expr[':'].external = function(obj) { 
     return (
      $(obj).attr('target') && $(obj).attr('target') =='_blank') 
       || 
        (!obj.href.match(/^mailto\:/) && !obj.href.match(/^tel\:/) && (obj.hostname != location.hostname) 
         ); 
    }; 
    // Usage: 
    $(document).ready(function() { 
     $('a:external').addClass('external');///css('background-color', 'green'); 
    }) 



}(); 

Answer 4

seleccionar sólo anclas que apuntan a su dominio cuando el href es el URL completa.

jQuery("a:not([href^='http://']), " + 
     "a[href^='http://localhost.com'], " + 
     "a:not([href^='http://localhost.com/wp-admin'])").addClass("internal"); 

Answer 5

prefiero este selector a mí mismo, que protege contra los falsos positivos para los enlaces absolutos que apuntan a su sitio (como los que a menudo generada por un sistema CMS).

var currentDomain = document.location.protocol + '//' + document.location.hostname; 
var outboundLinks = 'a[href^="http"]:not([href*="' + currentDomain + '"])'; 

Así es el caso de uso donde esto funcionó para mí, para el contexto:

var currentDomain = document.location.protocol + '//' + document.location.hostname; 
$('a[href^="http"]:not([href*="' + currentDomain + '"])').on('click', function (e) { 
    e.preventDefault(); 

    // track GA event for outbound links 
    if (typeof _gaq == "undefined") 
     return; 

    _gaq.push(["_trackEvent", "outbound", this.href, document.location.pathname + document.location.search]); 
}); 

Answer 6

creo que el enfoque simple y menos dolores de cabeza para que esto no es utilizar puro javascript o jQuery, pero combinarlo con html en su lugar y luego verifique si el enlace que hizo clic contiene la url de su sitio base. Funcionará para cualquier tipo de url base (ej .: example.com, example.com/site). Si necesita un valor dinámico, solo necesita establecer el valor usando su lenguaje de programación preferido del lado del servidor, como PHP, asp, java, etc.

Aquí se muestra un ejemplo:

HTML

<!--Create a hidden input containing your base site's url.--> 
<input type="hidden" id="sitedomain" value="example.com/site"/> 

jQuery

$(".elem").on("click", function(e){ 
    if($(this).closest("a").length) { 
    var url = $(this).attr("href"); 
    var sitedomain = $("#sitedomain").val(); 

    if(url.indexOf(sitedomain) > -1) { 
    alert("Internal"); 
    } else { 
    alert("External"); 
    } 
} 
}); 

Answer 7

probarlo

var fullBaseUrl = 'https://internal-link.com/blog'; 

var test_link1 = 'https://internal-link.com/blog/page1'; 
var test_link2 = 'https://internal-link.com/shop'; 
var test_link3 = 'https://google.com'; 

test_link1.split(fullBaseUrl)[0] == ''; // True 
test_link2.split(fullBaseUrl)[0] == ''; // False 
test_link3.split(fullBaseUrl)[0] == ''; // False 

Answer 8

$(document).ready(function() { 
$('a[href^="http"]').not('a[href^="http://' + $(location).attr('hostname') + 
'"]').attr('target', '_blank'); 
}); 

sustituir "http" a "https" si necesita