Le moyen le plus rapide pour détecter les Url externes

Je sais que la regex version a déjà été accepté, mais je serais prêt à parier que c'est "plus rapide" que de faire de complexe d'une regex. String.replace est assez rapide.

var isExternal = function(url) {
    var domain = function(url) {
        return url.replace('http://','').replace('https://','').split('/')[0];
    };

    return domain(location.href) !== domain(url);
}

Mise à jour

J'ai décidé de faire un peu plus de recherche sur ce sujet et a trouvé une méthode plus rapide qui utilise une Regex.

var isExternalRegexClosure = (function(){
    var domainRe = /https?:\/\/((?:[\w\d-]+\.)+[\w\d]{2,})/i;

    return function(url) {
        function domain(url) {
          return domainRe.exec(url)[1];  
        }

        return domain(location.href) !== domain(url);
    }
})();

Dans IE c'est légèrement plus rapide que la String.replace méthode. Cependant dans Chrome et Firefox, il est environ deux fois plus vite. Aussi, la définition de l'expression rationnelle qu'une seule fois à l'intérieur de la clôture, au lieu de juste à l'intérieur de la fonction normalement c'est environ 30% plus rapide dans Firefox.

Voici une jsperf l'examen de quatre façons différentes de détermination d'un nom d'hôte externe.

Il est important de noter que chaque méthode, j'ai essayé prend moins de 1ms à fonctionner même sur un vieux téléphone. De sorte que les performances ne devrait probablement pas être votre principale considération, sauf si vous faites des certains grands le traitement par lot.

J'ai été en utilisant psuedosavant de la méthode, mais a couru dans les quelques cas où il a déclenché des faux positifs, tels que domain-moins de liens ( /about, image.jpg ) et les liens d'ancrage ( #about ). L'ancienne méthode serait également donner des résultats inexacts pour les différents protocoles ( http vs https ).

Voici ma version légèrement modifiée:

var checkDomain = function(url) {
  if ( url.indexOf('//') === 0 ) { url = location.protocol + url; }
  return url.toLowerCase().replace(/([a-z])?:\/\//,'$1').split('/')[0];
};

var isExternal = function(url) {
  return ( ( url.indexOf(':') > -1 || url.indexOf('//') > -1 ) && checkDomain(location.href) !== checkDomain(url) );
};

Voici quelques tests avec la mise à jour de la fonction:

isExternal('http://google.com'); //true
isExternal('https://google.com'); //true
isExternal('//google.com'); //true (no protocol)
isExternal('mailto:[email protected]'); //true
isExternal('http://samedomain.com:8080/port'); //true (same domain, different port)
isExternal('https://samedomain.com/secure'); //true (same domain, https)

isExternal('http://samedomain.com/about'); //false (same domain, different page)
isExternal('HTTP://SAMEDOMAIN.COM/about'); //false (same domain, but different casing)
isExternal('//samedomain.com/about'); //false (same domain, no protocol)
isExternal('/about'); //false
isExternal('image.jpg'); //false
isExternal('#anchor'); //false

Il est plus précis dans l'ensemble, et il a même finit par être légèrement plus rapide, selon certains de base jsperf tests. Si vous laissez au large de la .toLowerCase() pour la casse, les tests, vous pouvez l'accélérer encore plus.

J'ai dû construire sur pseudosavant et de Jon réponses, car j'ai besoin d'attraper cas des Url commençant par "//" et les Url qui ne comprennent pas un sous-domaine. Voici ce qui a fonctionné pour moi:

JS:

var getDomainName = function(domain) {
var parts = domain.split('.').reverse();
var cnt = parts.length;
if (cnt >= 3) {
//see if the second level domain is a common SLD.
if (parts[1].match(/^(com|edu|gov|net|mil|org|nom|co|name|info|biz)$/i)) {
return parts[2] + '.' + parts[1] + '.' + parts[0];
}
}
return parts[1]+'.'+parts[0];
};
var isExternalUrl = function(url) {
var curLocationUrl = getDomainName(location.href.replace("http://", "").replace("https://", "").replace("//", "").split("/")[0].toLowerCase());
var destinationUrl = getDomainName(url.replace("http://", "").replace("https://", "").replace("//", "").split("/")[0].toLowerCase());
return !(curLocationUrl === destinationUrl)
};
$(document).delegate('a', 'click', function() {
var aHrefTarget = $(this).attr('target');
if(typeof aHrefTarget === 'undefined')
return;
if(aHrefTarget !== '_blank')
return;  //not an external link
var aHrefUrl = $(this).attr('href');
if(aHrefUrl.substr(0,2) !== '//' && (aHrefUrl.substr(0,1) == '/' || aHrefUrl.substr(0,1) == '#'))
return;  //this is a relative link or anchor link
if(isExternalUrl(aHrefUrl))
alert('clicked external link');
});

HTML:

<h3>Internal URLs:</h3>
<ul>
<li><a href="stackoverflow.com/questions/6238351/fastest-way-to-detect-external-urls" target="_blank">stackoverflow.com/questions/6238351/fastest-way-to-detect-external-urls</a></li>
<li><a href="www.stackoverflow.com/questions/6238351/fastest-way-to-detect-external-urls" target="_blank">www.stackoverflow.com/questions/6238351/fastest-way-to-detect-external-urls</a></li>
<li><a href="//stackoverflow.com/questions/6238351/fastest-way-to-detect-external-urls" target="_blank">//stackoverflow.com/questions/6238351/fastest-way-to-detect-external-urls</a></li>
<li><a href="//www.stackoverflow.com/questions/6238351/fastest-way-to-detect-external-urls" target="_blank">//www.stackoverflow.com/questions/6238351/fastest-way-to-detect-external-urls</a></li>
</ul>
<h3>External URLs:</h3>
<ul>
<li><a href="http://www.yahoo.com" target="_blank">http://www.yahoo.com</a></li>
<li><a href="yahoo.com" target="_blank">yahoo.com</a></li>
<li><a href="www.yahoo.com" target="_blank">www.yahoo.com</a></li>
<li><a href="//www.yahoo.com" target="_blank">//www.yahoo.com</a></li>
</ul>

Ne devrait pas

function is_external( url ) {
return url.match( /[a-zA-Z0-9]*:\/\/[^\s]*/g ) != null;
}

faire l'affaire? Ne fonctionne pas pour absolue (interne) url.

Vous pouvez simplement utiliser npm paquet est-interne-lien

Installation

npm install --save is-internal-link

Utilisation

import { isInternalLink } from "is-internal-link"
isInternalLink('https://www.google.com') //false
isInternalLink('/page1') //true

J'ai aussi souvent ce à réagir comme ça

import React from 'react'
import { Link as ReactRouterLink} from 'react-router-dom'
import { isInternalLink } from 'is-internal-link'
const Link = ({ children, to, activeClassName, ...other }) => {
if (isInternalLink(to)) {
return (
<ReactRouterLink to={to} activeClassName={activeClassName} {...other}>
{children}
</ReactRouterLink>
)
}
return (
<a href={to} target="_blank" {...other}>
{children}
</a>
)
}
export default Link

Avertissement: je suis l'auteur de cette lib