Comment tester si une chaîne d'URL est absolue ou relative?

RAPIDE

Si vous avez uniquement besoin de tester pour http:// ou https:// puis le plus efficace façon est:

if (urlString.indexOf('http://') === 0 || urlString.indexOf('https://') === 0)

---

UNIVERSELLE

Cependant, je vous suggère un plus universel, non sensible à la casse, indépendant du protocole approche:

var r = new RegExp('^(?:[a-z]+:)?//', 'i');
r.test('http://example.com'); //true - regular http absolute URL
r.test('HTTP://EXAMPLE.COM'); //true - HTTP upper-case absolute URL
r.test('https://www.exmaple.com'); //true - secure http absolute URL
r.test('ftp://example.com/file.txt'); //true - file transfer absolute URL
r.test('//cdn.example.com/lib.js'); //true - protocol-relative absolute URL
r.test('/myfolder/test.txt'); //false - relative URL
r.test('test'); //false - also relative URL

---

Expliquer la RegExp

^(?:[a-z]+:)?//

^ - début de la chaîne

(?: - début d'un non-groupe capturé

[a-z]+ - tous les caractères de 'a' à 'z' 1 ou plusieurs fois

: - chaîne (virgule)

)? - fin de non-groupe capturé. Groupe apparaître 0 ou 1 fois

// - chaîne (deux caractères barre oblique)

'i' - non sensible à la casse drapeau

Un très rapide et très flexible vérifier est:

if (url.indexOf('://') > 0 || url.indexOf('//') === 0 ) {
    //URL is absolute; either "http://example.com" or "//example.com"
} else {
    //URL is relative
}

Cela reconnaître une URL absolue, si:

• L'URL contient "://" n'importe où après le premier caractère, ou
• L'URL commence par "//" (protocole relatif)

---

• Pas de regex.
• Pas de jQuery ou autre dépendance.
• Pas codé en dur protocole de noms qui font de la condition sensible à la casse.
• Pas de manipulation de chaîne (par exemple, toLowerCase ou similaire).
• Vérifie uniquement la "relative ou absolue", mais ne faites pas d'autres vérifications, peut être utilisé pour les Url de sites web ou de tout protocole interne.

---

Mise à jour

Voici une petite fonction qui renvoie la valeur true/false pour l'URL:

function isUrlAbsolute(url) { 
    return (url.indexOf('://') > 0 || url.indexOf('//') === 0);
}

Et même dans l'ES6:

const isUrlAbsolute = (url) => (url.indexOf('://') > 0 || url.indexOf('//') === 0)

---

Mise à jour 2

De l'adresse Url au format /redirect?target=http://example.org je recommande d'utiliser ce code:

function isUrlAbsolute(url) {
    if (url.indexOf('//') === 0) {return true;} //URL is protocol-relative (= absolute)
    if (url.indexOf('://') === -1) {return false;} //URL has no protocol (= relative)
    if (url.indexOf('.') === -1) {return false;} //URL does not contain a dot, i.e. no TLD (= relative, possibly REST)
    if (url.indexOf('/') === -1) {return false;} //URL does not contain a single slash (= relative)
    if (url.indexOf(':') > url.indexOf('/')) {return false;} //The first colon comes after the first slash (= relative)
    if (url.indexOf('://') < url.indexOf('.')) {return true;} //Protocol is defined before first dot (= absolute)
    return false; //Anything else must be relative
}

Et même dans sa forme courte et ES 6

//Traditional JS, shortened
function isUrlAbsolute(url) {
    return url.indexOf('//') === 0 ? true : url.indexOf('://') === -1 ? false : url.indexOf('.') === -1 ? false : url.indexOf('/') === -1 ? false : url.indexOf(':') > url.indexOf('/') ? false : url.indexOf('://') < url.indexOf('.') ? true : false;
}

//ES 6
const isUrlAbsolute = (url) => (url.indexOf('//') === 0 ? true : url.indexOf('://') === -1 ? false : url.indexOf('.') === -1 ? false : url.indexOf('/') === -1 ? false : url.indexOf(':') > url.indexOf('/') ? false : url.indexOf('://') < url.indexOf('.') ? true : false)

Ici sont quelques-uns des cas de test:

//Test
console.log( isUrlAbsolute('http://stackoverflow.com') ) //-> true
console.log( isUrlAbsolute('//stackoverflow.com') ) //-> true
console.log( isUrlAbsolute('stackoverflow.com') ) //-> false
console.log( isUrlAbsolute('Ftp://example.net') ) //-> true
console.log( isUrlAbsolute('/redirect?target=http://example.org') ) //-> false

Encore plus Universel conforme à la RFC URI approche:

(?:^[a-z][a-z0-9+.-]*:|\/\/) regex explication

Les autres solutions proposées ici serait un échec pour les liens comme mailto:[email protected]

RFC 3986 définit un Régime comme:

scheme = ALPHA *( ALPHA /DIGIT /"+" /"-" /"." )

3.1. Schéma
https://tools.ietf.org/html/rfc3986#section-3.1

Tandis que le protocole relatif url est techniquement valides conformément à la section 4.2, Paul Irlandais a basculé de l'autre côté, et considère cela comme un anti-modèle. Voir http://www.paulirish.com/2010/the-protocol-relative-url/

4.2. Référence Relative
http://tools.ietf.org/html/rfc3986#section-4.2

Si vous souhaitez que les regex sans protocole url relative à l'utilisation:

^[a-z][a-z0-9+.-]*:

Pour voir une liste complète des autres types d'uri valide bord des cas, consultez la liste ici: https://en.wikipedia.org/wiki/URI_scheme

Ne pas utiliser de bas niveau, des trucs comme regexp etc. Ces choses ont été résolus par beaucoup d'autres personnes. En particulier les cas de bord.

Ont un coup d'oeil à URI.js, il devrait faire la job: http://medialize.github.io/URI.js/docs.html#is

var uri = new URI("http://example.org/");
uri.is("absolute") === true;

Fonction suivante sera appelée lors d'un clic se produit même sur un lien hypertexte j'.e 'un' tag si l'étiquette contient l'url sera relatif ou contient même hôte alors que la nouvelle page va se charger en même onglet du navigateur si elle contient des url différentes, puis le chargement de la page dans le nouvel onglet de navigateur

jQuery(document).ready(function() {
    $('a').click(function(){

        var a = this;
        var a_href = $(this).attr('href');
        var regex = new RegExp('^(?:[a-z]+:)?//', 'i');     

        if(a.host == location.host || regex.test(a_href) == false){
            a.target = '_self';
        }else{
            a.target = '_blank';
        }
    }); 
});

var isExternalURL = url.toLowerCase().indexOf('http://') === 0 || url.toLowerCase().indexOf('https://') === 0 ;