Controlla se una stringa JavaScript è un URL

Esiste un modo in JavaScript per verificare se una stringa è un URL?

RegExes sono esclusi perché l'URL è molto probabilmente scritto come stackoverflow; vale a dire che potrebbe non avere un .com, wwwo http.

Una domanda correlata con una risposta:

Corrispondenza URL regex Javascript

O questo Regexp da Devshed :

function validURL(str) {
  var pattern = new RegExp('^(https?:\\/\\/)?'+ // protocol
    '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|'+ // domain name
    '((\\d{1,3}\\.){3}\\d{1,3}))'+ // OR ip (v4) address
    '(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*'+ // port and path
    '(\\?[;&a-z\\d%_.~+=-]*)?'+ // query string
    '(\\#[-a-z\\d_]*)?$','i'); // fragment locator
  return !!pattern.test(str);
}

function isURL(str) {
  var pattern = new RegExp('^(https?:\\/\\/)?'+ // protocol
  '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.?)+[a-z]{2,}|'+ // domain name
  '((\\d{1,3}\\.){3}\\d{1,3}))'+ // OR ip (v4) address
  '(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*'+ // port and path
  '(\\?[;&a-z\\d%_.~+=-]*)?'+ // query string
  '(\\#[-a-z\\d_]*)?$','i'); // fragment locator
  return pattern.test(str);
}

Puoi provare a usare il URLcostruttore : se non viene lanciato, la stringa è un URL valido:

function isValidUrl(string) {
  try {
    new URL(string);
  } catch (_) {
    return false;  
  }

  return true;
}

Il termine "URL" è definito in RFC 3886 (come URI); deve iniziare con un nome di schema e il nome di schema non è limitato a http / https.

Esempi notevoli:

• www.google.com non è un URL valido (schema mancante)
• javascript:void(0) è un URL valido, anche se non HTTP
• http://..è un URL valido, essendo l'host.. ; se si risolve dipende dal tuo DNS
• https://google..com è un URL valido, come sopra

Se vuoi verificare se una stringa è un URL HTTP valido:

function isValidHttpUrl(string) {
  let url;

  try {
    url = new URL(string);
  } catch (_) {
    return false;  
  }

  return url.protocol === "http:" || url.protocol === "https:";
}

Piuttosto che usare un'espressione regolare, consiglierei di usare un elemento di ancoraggio.

quando si imposta la hrefproprietà di un anchor, vengono impostate varie altre proprietà.

var parser = document.createElement('a');
parser.href = "http://example.com:3000/pathname/?search=test#hash";

parser.protocol; // => "http:"
parser.hostname; // => "example.com"
parser.port;     // => "3000"
parser.pathname; // => "/pathname/"
parser.search;   // => "?search=test"
parser.hash;     // => "#hash"
parser.host;     // => "example.com:3000"

fonte

Tuttavia, se il valore hrefassociato non è un URL valido, il valore di tali proprietà ausiliarie sarà la stringa vuota.

Modifica: come sottolineato nei commenti: se viene utilizzato un URL non valido, è possibile sostituire le proprietà dell'URL corrente.

Quindi, purché non passi l'URL della pagina corrente, puoi fare qualcosa del tipo:

function isValidURL(str) {
   var a  = document.createElement('a');
   a.href = str;
   return (a.host && a.host != window.location.host);
}

Sto usando la funzione di seguito per convalidare l'URL con o senza http/https:

function isValidURL(string) {
  var res = string.match(/(http(s)?:\/\/.)?(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)/g);
  return (res !== null)
};

var testCase1 = "http://en.wikipedia.org/wiki/Procter_&_Gamble";
console.log(isValidURL(testCase1)); // return true

var testCase2 = "http://www.google.com/url?sa=i&rct=j&q=&esrc=s&source=images&cd=&docid=nIv5rk2GyP3hXM&tbnid=isiOkMe3nCtexM:&ved=0CAUQjRw&url=http%3A%2F%2Fanimalcrossing.wikia.com%2Fwiki%2FLion&ei=ygZXU_2fGKbMsQTf4YLgAQ&bvm=bv.65177938,d.aWc&psig=AFQjCNEpBfKnal9kU7Zu4n7RnEt2nerN4g&ust=1398298682009707";
console.log(isValidURL(testCase2)); // return true

var testCase3 = "https://sdfasd";
console.log(isValidURL(testCase3)); // return false

var testCase4 = "dfdsfdsfdfdsfsdfs";
console.log(isValidURL(testCase4)); // return false

var testCase5 = "magnet:?xt=urn:btih:123";
console.log(isValidURL(testCase5)); // return false

var testCase6 = "https://stackoverflow.com/";
console.log(isValidURL(testCase6)); // return true

var testCase7 = "https://w";
console.log(isValidURL(testCase7)); // return false

var testCase8 = "https://sdfasdp.ppppppppppp";
console.log(isValidURL(testCase8)); // return false

Per convalidare l'URL usando javascript è mostrato di seguito

function ValidURL(str) {
  var regex = /(http|https):\/\/(\w+:{0,1}\w*)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%!\-\/]))?/;
  if(!regex .test(str)) {
    alert("Please enter valid URL.");
    return false;
  } else {
    return true;
  }
}

Affidati a una biblioteca: https://www.npmjs.com/package/valid-url

import { isWebUri } from 'valid-url';
// ...
if (!isWebUri(url)) {
    return "Not a valid url.";
}

Miglioramento della risposta accettata ...

• Verificare la presenza di ftp / ftps come protocollo
• Ha una doppia escape per le barre rovesciate (\\)
• Assicura che i domini abbiano un punto e un'estensione (.com .io .xyz)
• Consente i due punti (:) nel percorso, ad esempio http://thingiverse.com/download:1894343
• Consente e commerciale (&) nel percorso, ad esempio http://en.wikipedia.org/wiki/Procter_&_Gamble

• Consente il simbolo @ nel percorso, ad esempio https://medium.com/@techytimo

  isURL(str) {
    var pattern = new RegExp('^((ft|htt)ps?:\\/\\/)?'+ // protocol
    '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|'+ // domain name and extension
    '((\\d{1,3}\\.){3}\\d{1,3}))'+ // OR ip (v4) address
    '(\\:\\d+)?'+ // port
    '(\\/[-a-z\\d%@_.~+&:]*)*'+ // path
    '(\\?[;&a-z\\d%@_.,~+&:=-]*)?'+ // query string
    '(\\#[-a-z\\d_]*)?$','i'); // fragment locator
    return pattern.test(str);
  }

Ecco ancora un altro metodo.

var elm;
function isValidURL(u){
  if(!elm){
    elm = document.createElement('input');
    elm.setAttribute('type', 'url');
  }
  elm.value = u;
  return elm.validity.valid;
}

console.log(isValidURL('http://www.google.com/'));
console.log(isValidURL('//google.com'));
console.log(isValidURL('google.com'));
console.log(isValidURL('localhost:8000'));

(Non ho rappresentanti per commentare l' esempio ValidURL ; quindi pubblica questo come risposta.)

Sebbene l'uso di URL relativi al protocollo non sia incoraggiato ( l'URL relativo al protocollo ), a volte vengono impiegati. Per convalidare tale URL con un'espressione regolare, la parte del protocollo potrebbe essere facoltativa, ad esempio:

function isValidURL(str) {
    var pattern = new RegExp('^((https?:)?\\/\\/)?'+ // protocol
        '(?:\\S+(?::\\S*)?@)?' + // authentication
        '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|'+ // domain name
        '((\\d{1,3}\\.){3}\\d{1,3}))'+ // OR ip (v4) address
        '(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*'+ // port and path
        '(\\?[;&a-z\\d%_.~+=-]*)?'+ // query string
        '(\\#[-a-z\\d_]*)?$','i'); // fragment locater
    if (!pattern.test(str)) {
        return false;
    } else {
        return true;
    }
}

Come altri hanno notato, l'espressione regolare non sembra essere l'approccio più adatto per la convalida degli URL.

Puoi usare l' API nativa dell'URL :

  const isUrl = string => {
      try { return Boolean(new URL(string)); }
      catch(e){ return false; }
  }

Come è stato notato, il regex perfetto è inafferrabile, ma sembra comunque essere un approccio ragionevole (le alternative sono i test lato server o la nuova API sperimentale URL ). Tuttavia, le risposte di alto livello spesso restituiscono false per gli URL comuni, ma ancora peggio bloccherà la tua app / pagina per minuti su una stringa tanto semplice quanto isURL('aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa'). È stato sottolineato in alcuni dei commenti, ma molto probabilmente non è stato inserito un valore negativo per vederlo. Appendere così rende quel codice inutilizzabile in qualsiasi applicazione seria. Penso che sia dovuto agli insiemi di insensibilità maiuscole ripetute in codice come ((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.?)+[a-z]{2,}|' .... Elimina la "i" e non si blocca, ma ovviamente non funzionerà come desiderato. Ma anche con il flag case ignore quei test rifiutano valori unicode elevati consentiti.

Il migliore già menzionato è:

function isURL(str) {
  return /^(?:\w+:)?\/\/([^\s\.]+\.\S{2}|localhost[\:?\d]*)\S*$/.test(str); 
}

Viene da Github segmentio / is-url . La cosa buona di un repository di codice è che puoi vedere i test e tutti i problemi e anche le stringhe di test che lo attraversano. C'è un ramo che permetterebbe alle stringhe di perdere il protocollo come google.com, anche se probabilmente stai facendo troppe ipotesi. Il repository è stato aggiornato e non ho intenzione di provare a mantenere un mirror qui. È stato suddiviso in test separati per evitare le ripetizioni di RegEx che possono essere sfruttate per attacchi DOS (non credo che tu debba preoccuparti di ciò con js lato client, ma devi preoccuparti che la tua pagina rimanga così a lungo che il tuo visitatore lascia il tuo sito).

C'è un altro repository che ho visto che potrebbe anche essere migliore per isURL su dperini / regex-weburl.js , ma è molto complesso. Ha un elenco di test più grande di URL validi e non validi. Quello semplice sopra passa ancora tutti gli aspetti positivi e non riesce a bloccare solo alcuni strani aspetti negativi come http://a.b--c.de/ips speciali.

Qualunque cosa tu scelga, esegui questa funzione che ho adattato dai test su dperini / regex-weburl.js, mentre usi l'iniettore degli strumenti di sviluppo del tuo browser.

function testIsURL() {
//should match
console.assert(isURL("http://foo.com/blah_blah"));
console.assert(isURL("http://foo.com/blah_blah/"));
console.assert(isURL("http://foo.com/blah_blah_(wikipedia)"));
console.assert(isURL("http://foo.com/blah_blah_(wikipedia)_(again)"));
console.assert(isURL("http://www.example.com/wpstyle/?p=364"));
console.assert(isURL("https://www.example.com/foo/?bar=baz&inga=42&quux"));
console.assert(isURL("http://✪df.ws/123"));
console.assert(isURL("http://userid:password@example.com:8080"));
console.assert(isURL("http://userid:password@example.com:8080/"));
console.assert(isURL("http://userid@example.com"));
console.assert(isURL("http://userid@example.com/"));
console.assert(isURL("http://userid@example.com:8080"));
console.assert(isURL("http://userid@example.com:8080/"));
console.assert(isURL("http://userid:password@example.com"));
console.assert(isURL("http://userid:password@example.com/"));
console.assert(isURL("http://142.42.1.1/"));
console.assert(isURL("http://142.42.1.1:8080/"));
console.assert(isURL("http://➡.ws/䨹"));
console.assert(isURL("http://⌘.ws"));
console.assert(isURL("http://⌘.ws/"));
console.assert(isURL("http://foo.com/blah_(wikipedia)#cite-1"));
console.assert(isURL("http://foo.com/blah_(wikipedia)_blah#cite-1"));
console.assert(isURL("http://foo.com/unicode_(✪)_in_parens"));
console.assert(isURL("http://foo.com/(something)?after=parens"));
console.assert(isURL("http://☺.damowmow.com/"));
console.assert(isURL("http://code.google.com/events/#&product=browser"));
console.assert(isURL("http://j.mp"));
console.assert(isURL("ftp://foo.bar/baz"));
console.assert(isURL("http://foo.bar/?q=Test%20URL-encoded%20stuff"));
console.assert(isURL("http://مثال.إختبار"));
console.assert(isURL("http://例子.测试"));
console.assert(isURL("http://उदाहरण.परीक्षा"));
console.assert(isURL("http://-.~_!$&'()*+,;=:%40:80%2f::::::@example.com"));
console.assert(isURL("http://1337.net"));
console.assert(isURL("http://a.b-c.de"));
console.assert(isURL("http://223.255.255.254"));
console.assert(isURL("postgres://u:p@example.com:5702/db"));
console.assert(isURL("https://d1f4470da51b49289906b3d6cbd65074@app.getsentry.com/13176"));

//SHOULD NOT MATCH:
console.assert(!isURL("http://"));
console.assert(!isURL("http://."));
console.assert(!isURL("http://.."));
console.assert(!isURL("http://../"));
console.assert(!isURL("http://?"));
console.assert(!isURL("http://??"));
console.assert(!isURL("http://??/"));
console.assert(!isURL("http://#"));
console.assert(!isURL("http://##"));
console.assert(!isURL("http://##/"));
console.assert(!isURL("http://foo.bar?q=Spaces should be encoded"));
console.assert(!isURL("//"));
console.assert(!isURL("//a"));
console.assert(!isURL("///a"));
console.assert(!isURL("///"));
console.assert(!isURL("http:///a"));
console.assert(!isURL("foo.com"));
console.assert(!isURL("rdar://1234"));
console.assert(!isURL("h://test"));
console.assert(!isURL("http:// shouldfail.com"));
console.assert(!isURL(":// should fail"));
console.assert(!isURL("http://foo.bar/foo(bar)baz quux"));
console.assert(!isURL("ftps://foo.bar/"));
console.assert(!isURL("http://-error-.invalid/"));
console.assert(!isURL("http://a.b--c.de/"));
console.assert(!isURL("http://-a.b.co"));
console.assert(!isURL("http://a.b-.co"));
console.assert(!isURL("http://0.0.0.0"));
console.assert(!isURL("http://10.1.1.0"));
console.assert(!isURL("http://10.1.1.255"));
console.assert(!isURL("http://224.1.1.1"));
console.assert(!isURL("http://1.1.1.1.1"));
console.assert(!isURL("http://123.123.123"));
console.assert(!isURL("http://3628126748"));
console.assert(!isURL("http://.www.foo.bar/"));
console.assert(!isURL("http://www.foo.bar./"));
console.assert(!isURL("http://.www.foo.bar./"));
console.assert(!isURL("http://10.1.1.1"));}

E poi prova quella stringa di 'a's.

Vedi questo confronto di regex isURL di Mathias Bynens per maggiori informazioni prima di pubblicare una regex apparentemente fantastica.

Non posso commentare il post che è il più vicino # 5717133 , ma di seguito è il modo in cui ho capito come far funzionare @ tom-gullen regex.

/^(https?:\/\/)?((([a-z\d]([a-z\d-]*[a-z\d])*)\.)+[a-z]{2,}|((\d{1,3}\.){3}\d{1,3}))(\:\d+)?(\/[-a-z\d%_.~+]*)*(\?[;&a-z\d%_.~+=-]*)?(\#[-a-z\d_]*)?$/i

Uso validator.js

ES6

import isURL from 'validator/lib/isURL'

isURL(string)

No ES6

var validator = require('validator');

validator.isURL(string)

È inoltre possibile ottimizzare il comportamento di questa funzione passando facoltativo options oggetto come secondo argomento diisURL

Ecco l' optionsoggetto predefinito :

let options = {
    protocols: [
        'http',
        'https',
        'ftp'
    ],
    require_tld: true,
    require_protocol: false,
    require_host: true,
    require_valid_protocol: true,
    allow_underscores: false,
    host_whitelist: false,
    host_blacklist: false,
    allow_trailing_dot: false,
    allow_protocol_relative_urls: false,
    disallow_auth: false
}

isURL(string, options)

host_whiteliste host_blacklistpossono essere matrici di host. Supportano anche le espressioni regolari.

let options = {
    host_blacklist: ['foo.com', 'bar.com'],
}

isURL('http://foobar.com', options) // => true
isURL('http://foo.bar.com/', options) // => true
isURL('http://qux.com', options) // => true

isURL('http://bar.com/', options) // => false
isURL('http://foo.com/', options) // => false


options = {
    host_blacklist: ['bar.com', 'foo.com', /\.foo\.com$/],
}

isURL('http://foobar.com', options) // => true
isURL('http://foo.bar.com/', options) // => true
isURL('http://qux.com', options) // => true

isURL('http://bar.com/', options) // => false
isURL('http://foo.com/', options) // => false
isURL('http://images.foo.com/', options) // => false
isURL('http://cdn.foo.com/', options) // => false
isURL('http://a.b.c.foo.com/', options) // => false

Una funzione che ho usato per convalidare una "stringa" URL è:

var matcher = /^(?:\w+:)?\/\/([^\s\.]+\.\S{2}|localhost[\:?\d]*)\S*$/;

function isUrl(string){
  return matcher.test(string);
}

Questa funzione restituirà un valore booleano se la stringa è un URL.

Esempi:

isUrl("https://google.com");     // true
isUrl("http://google.com");      // true
isUrl("http://google.de");       // true
isUrl("//google.de");            // true
isUrl("google.de");              // false
isUrl("http://google.com");      // true
isUrl("http://localhost");       // true
isUrl("https://sdfasd");         // false

Questo è abbastanza difficile da fare con regex puro perché gli URL hanno molti "inconvenienti".

1. Ad esempio i nomi di dominio hanno complicate restrizioni sui trattini:

   un. È consentito avere molti trattini consecutivi nel mezzo.

   b. ma il primo carattere e l'ultimo carattere del nome di dominio non possono essere un trattino

   c. Il terzo e il quarto carattere non possono essere entrambi trattini

2. Allo stesso modo il numero di porta può essere compreso nell'intervallo 1-65535. Questo è facile da verificare se si estrae la parte della porta e la conversione in intma abbastanza difficile da controllare con un'espressione regolare.

3. Inoltre non esiste un modo semplice per verificare le estensioni di dominio valide. Alcuni paesi hanno domini di secondo livello (come "co.uk") oppure l'estensione può essere una parola lunga come ".internazionale". E nuovi TLD vengono aggiunti regolarmente. Questo tipo di cose può essere verificato solo su un elenco hardcoded. (vedi https://en.wikipedia.org/wiki/Top-level_domain )

4. Poi ci sono URL di magneti, indirizzi ftp ecc. Tutti hanno requisiti diversi.

Tuttavia, ecco una funzione che gestisce praticamente tutto tranne:

• Caso 1. c
• Accetta qualsiasi numero di porta di 1-5 cifre
• Accetta qualsiasi estensione 2-13 caratteri
• Non accetta ftp, magnete, ecc ...

function isValidURL(input) {
    pattern = '^(https?:\\/\\/)?' + // protocol
        '((([a-zA-Z\\d]([a-zA-Z\\d-]{0,61}[a-zA-Z\\d])*\\.)+' + // sub-domain + domain name
        '[a-zA-Z]{2,13})' + // extension
        '|((\\d{1,3}\\.){3}\\d{1,3})' + // OR ip (v4) address
        '|localhost)' + // OR localhost
        '(\\:\\d{1,5})?' + // port
        '(\\/[a-zA-Z\\&\\d%_.~+-:@]*)*' + // path
        '(\\?[a-zA-Z\\&\\d%_.,~+-:@=;&]*)?' + // query string
        '(\\#[-a-zA-Z&\\d_]*)?$'; // fragment locator
    regex = new RegExp(pattern);
    return regex.test(input);
}

let tests = [];
tests.push(['', false]);
tests.push(['http://en.wikipedia.org/wiki/Procter_&_Gamble', true]);
tests.push(['https://sdfasd', false]);
tests.push(['http://www.google.com/url?sa=i&rct=j&q=&esrc=s&source=images&cd=&docid=nIv5rk2GyP3hXM&tbnid=isiOkMe3nCtexM:&ved=0CAUQjRw&url=http%3A%2F%2Fanimalcrossing.wikia.com%2Fwiki%2FLion&ei=ygZXU_2fGKbMsQTf4YLgAQ&bvm=bv.65177938,d.aWc&psig=AFQjCNEpBfKnal9kU7Zu4n7RnEt2nerN4g&ust=1398298682009707', true]);
tests.push(['https://stackoverflow.com/', true]);
tests.push(['https://w', false]);
tests.push(['aaa', false]);
tests.push(['aaaa', false]);
tests.push(['oh.my', true]);
tests.push(['dfdsfdsfdfdsfsdfs', false]);
tests.push(['google.co.uk', true]);
tests.push(['test-domain.MUSEUM', true]);
tests.push(['-hyphen-start.gov.tr', false]);
tests.push(['hyphen-end-.com', false]);
tests.push(['https://sdfasdp.international', true]);
tests.push(['https://sdfasdp.pppppppp', false]);
tests.push(['https://sdfasdp.ppppppppppppppppppp', false]);
tests.push(['https://sdfasd', false]);
tests.push(['https://sub1.1234.sub3.sub4.sub5.co.uk/?', true]);
tests.push(['http://www.google-com.123', false]);
tests.push(['http://my--testdomain.com', false]);
tests.push(['http://my2nd--testdomain.com', true]);
tests.push(['http://thingiverse.com/download:1894343', true]);
tests.push(['https://medium.com/@techytimo', true]);
tests.push(['http://localhost', true]);
tests.push(['localhost', true]);
tests.push(['localhost:8080', true]);
tests.push(['localhost:65536', true]);
tests.push(['localhost:80000', false]);
tests.push(['magnet:?xt=urn:btih:123', true]);

for (let i = 0; i < tests.length; i++) {
    console.log('Test #' + i + (isValidURL(tests[i][0]) == tests[i][1] ? ' passed' : ' failed') + ' on ["' + tests[i][0] + '", ' + tests[i][1] + ']');
}

Penso che usare l' API URL nativa sia meglio di schemi regex complessi come suggerito da @pavlo. Ha alcuni inconvenienti che possiamo risolvere con un codice aggiuntivo. Questo approccio non riesce per il seguente URL valido.

//cdn.google.com/script.js

È possibile aggiungere prima il protocollo mancante per evitarlo. Inoltre non riesce a rilevare il seguente URL non valido.

http://w
http://..

Quindi perché controllare l'intero URL? possiamo solo controllare il dominio. Ho preso in prestito il regex per verificare il dominio da qui .

function isValidUrl(string) {
    if (string && string.length > 1 && string.slice(0, 2) == '//') {
        string = 'http:' + string; //dummy protocol so that URL works
    }
    try {
        var url = new URL(string);
        return url.hostname && url.hostname.match(/^([a-z0-9])(([a-z0-9-]{1,61})?[a-z0-9]{1})?(\.[a-z0-9](([a-z0-9-]{1,61})?[a-z0-9]{1})?)?(\.[a-zA-Z]{2,4})+$/) ? true : false;
    } catch (_) {
        return false;
    }
}

L' hostnameattributo è una stringa vuota per javascript:void(0), quindi funziona anche per quello e puoi anche aggiungere un verificatore di indirizzi IP. Mi piacerebbe attenermi maggiormente alle API native e spero che inizi a supportare tutto in un prossimo futuro.

La domanda richiede un metodo di convalida per un URL come stackoverflow , senza il protocollo o alcun punto nel nome host. Quindi, non si tratta di convalidare la sintassi dell'URL, ma di verificare se si tratta di un URL valido, chiamandolo effettivamente.

Ho provato diversi metodi per sapere se l'URL true esiste ed è richiamabile dall'interno del browser, ma non ho trovato alcun modo per testare con javascript l'intestazione della risposta della chiamata:

• l'aggiunta di un elemento di ancoraggio va bene per sparare click() metodo.
• fare una chiamata Ajax al difficile URL con 'GET'va bene, ma ha vari limiti dovuti alle CORSpolitiche e non è il caso di usareajax , poiché l'URL potrebbe essere al di fuori del dominio del mio server.
• utilizzando l' API di recupero ha una soluzione simile a Ajax.
• l'altro problema è che ho il mio server sotto httpsprotocollo e genera un'eccezione quando chiamo URL non sicuri.

Quindi, la migliore soluzione che mi viene in mente è ottenere uno strumento per eseguire CURLusando javascript provando qualcosa di simile curl -I <url>. Purtroppo non ne ho trovato nessuno e in apparenza non è possibile. Apprezzerò qualsiasi commento su questo.

Ma, alla fine, ho un server in esecuzione PHP e mentre uso Ajax per quasi tutte le mie richieste, ho scritto una funzione sul lato server per eseguire lì la richiesta di arricciatura e tornare al browser.

Per quanto riguarda la singola parola url sulla domanda "stackoverflow", mi porterà a https://daniserver.com.ar/stackoverflow, dove daniserver.com.ar è il mio dominio.

Questo sembra essere uno dei problemi più difficili in CS;)

Ecco un'altra soluzione incompleta che funziona abbastanza bene per me e meglio delle altre che ho visto qui. Sto usando un input [type = url] per questo al fine di supportare IE11, altrimenti sarebbe molto più semplice usare window.URL per eseguire invece la validazione:

const ipv4Regex = /^(\d{1,3}\.){3}\d{1,3}$/;
function isValidIpv4(ip) {
  if (!ipv4Regex.test(ip)) return false;
  return !ip.split('.').find(n => n > 255);
}

const domainRegex = /(?:[a-z0-9-]{1,63}\.){1,125}[a-z]{2,63}$/i;
function isValidDomain(domain) {
  return isValidIpv4(domain) || domainRegex.test(domain);
}

let input;
function validateUrl(url) {
  if (! /^https?:\/\//.test(url)) url = `http://${url}`; // assuming Babel is used
  // to support IE11 we'll resort to input[type=url] instead of window.URL:
  // try { return isValidDomain(new URL(url).host) && url; } catch(e) { return false; }
  if (!input) { input = document.createElement('input'); input.type = 'url'; }
  input.value = url;
  if (! input.validity.valid) return false;
  const domain = url.split(/^https?:\/\//)[1].split('/')[0].split('@').pop();
  return isValidDomain(domain) && url;
}

console.log(validateUrl('google'), // false
  validateUrl('user:pw@mydomain.com'),
  validateUrl('https://google.com'),
  validateUrl('100.100.100.100/abc'),
  validateUrl('100.100.100.256/abc')); // false

Al fine di accettare input incompleti come "www.mydomain.com" lo renderà anche valido supponendo che il protocollo sia "http" in quei casi e restituendo l'URL valido se l'indirizzo è valido. Restituisce falso quando non è valido.

Supporta anche domini IPv4, ma non IPv6.

Nel mio caso, il mio unico requisito è che l'input dell'utente non venga interpretato come un collegamento relativo quando inserito nell'href di un tag e le risposte qui sono state un po 'OTT o gli URL consentiti non soddisfano i miei requisiti, quindi questo è quello che sto andando con:

^https?://.+$

La stessa cosa potrebbe essere raggiunta abbastanza facilmente senza regex.

questo lavoro con me

function isURL(str) {
  var regex = /(http|https):\/\/(\w+:{0,1}\w*)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%!\-\/]))?/;
  var pattern = new RegExp(regex); 
return pattern.test(str);
}

Se puoi cambiare il tipo di input, penso che questa soluzione sarebbe molto più semplice:

Puoi usare semplicemente i type="url"tuoi input e controllarli con checkValidity()in js

Per esempio:

your.html

<input id="foo" type="url">

your.js

// The selector is JQuery, but the function is plain JS
$("#foo").on("keyup", function() {
    if (this.checkValidity()) {
        // The url is valid
    } else {
        // The url is invalid
    }
});

Questo non è provocatoriamente l'approccio più efficace, ma è leggibile e facile da formulare per qualsiasi cosa tu abbia bisogno. Ed è più facile aggiungere regex / complessità da qui. Quindi ecco un approccio molto pragmatico

const validFirstBits = ["ftp://", "http://", "https://", "www."];
const invalidPatterns = [" ", "//.", ".."];

export function isUrl(word) {
// less than www.1.dk
if (!word || word.length < 8) return false;

// Let's check and see, if our candidate starts with some of our valid first bits
const firstBitIsValid = validFirstBits.some(bit => word.indexOf(bit) === 0);
if (!firstBitIsValid) return false;

const hasInvalidPatterns = invalidPatterns.some(
    pattern => word.indexOf(pattern) !== -1,
);

if (hasInvalidPatterns) return false;

const dotSplit = word.split(".");
if (dotSplit.length > 1) {
    const lastBit = dotSplit.pop(); // string or undefined
    if (!lastBit) return false;
    const length = lastBit.length;
    const lastBitIsValid =
        length > 1 || (length === 1 && !isNaN(parseInt(lastBit)));
    return !!lastBitIsValid;
}

    return false;
}

TEST:

import { isUrl } from "./foo";

describe("Foo", () => {
    test("should validate correct urls correctly", function() {
        const validUrls = [
            "http://example.com",
            "http://example.com/blah",
            "http://127.0.0.1",
            "http://127.0.0.1/wow",
            "https://example.com",
            "https://example.com/blah",
            "https://127.0.0.1:1234",
            "ftp://example.com",
            "ftp://example.com/blah",
            "ftp://127.0.0.1",
            "www.example.com",
            "www.example.com/blah",
        ];

        validUrls.forEach(url => {
            expect(isUrl(url) && url).toEqual(url);
        });
    });

    test("should validate invalid urls correctly", function() {
        const inValidUrls = [
            "http:// foo.com",
            "http:/foo.com",
            "http://.foo.com",
            "http://foo..com",
            "http://.com",
            "http://foo",
            "http://foo.c",
        ];

        inValidUrls.forEach(url => {
            expect(!isUrl(url) && url).toEqual(url);
        });
    });
});

Mathias Bynens ha compilato un elenco di regex URL ben noti con URL di test. Vi sono poche ragioni per scrivere una nuova espressione regolare; scegline uno esistente adatto a te.

Ma la tabella di confronto per quelle regex mostra anche che è quasi impossibile eseguire la convalida degli URL con una singola espressione regolare. Tutte le regex nella lista di Bynens producono falsi positivi e falsi negativi.

Suggerisco di utilizzare un parser URL esistente (ad esempio new URL('http://www.example.com/')in JavaScript) e quindi applicare i controlli che si desidera eseguire rispetto alla forma analizzata e normalizzata dell'URL resp. i suoi componenti. L'uso URLdell'interfaccia JavaScript ha l'ulteriore vantaggio di accettare solo gli URL realmente accettati dal browser.

Tieni inoltre presente che gli URL tecnicamente errati potrebbero comunque funzionare. Per esempio http://w_w_w.example.com/, http://www..example.com/, http://123.example.com/tutti hanno una parte hostname non valida, ma tutti i browser che conosco sarà cercare di aprirli, senza lamentele, e quando si specificare gli indirizzi IP per i nomi non validi in/etc/hosts/ tali URL funziona anche, ma solo sul tuo computer.

Pertanto, la domanda non è tanto se un URL sia valido, ma piuttosto quali URL funzionano e dovrebbero essere consentiti in un determinato contesto.

Se si desidera eseguire la convalida dell'URL, è possibile trascurare molti dettagli e casi limite:

• Gli URL possono contenere credenziali come in http://user:password@www.example.com/ .
• I numeri di porta devono essere compresi nell'intervallo 0-65535, ma potresti comunque voler escludere la porta jolly 0.
• I numeri di porta potrebbero avere zeri iniziali come in http://www.example.com:000080/ .
• Gli indirizzi IPv4 non sono in alcun modo limitati a 4 numeri decimali compresi nell'intervallo 0-255. Puoi usare da uno a quattro numeri interi, che possono essere decimali, ottali o esadecimali. Gli URL https: //010.010.000010.010/ , https: //0x8.0x8.0x0008.0x8/ , https: //8.8.2056/ , https: //8.526344/ , https: // 134744072 / sono tutti validi e solo modi creativi di scrivere https://8.8.8.8/ .
• L'autorizzazione di indirizzi di loopback ( http://127.0.0.1/ ), indirizzi IP privati ​​( http://192.168.1.1 ), indirizzi link-local ( http://169.254.100.200 ) e così via possono avere un impatto sulla sicurezza o privacy. Se, ad esempio, li consenti come l'indirizzo degli avatar degli utenti in un forum, fai in modo che i browser degli utenti inviino richieste di rete indesiderate nella loro rete locale e in Internet di cose che tali richieste possono causare cose divertenti e non così divertenti a succede a casa tua.
• Per gli stessi motivi, potresti voler eliminare i collegamenti a nomi host non completamente qualificati, in altre parole nomi host senza punto.
• Ma i nomi host possono sempre avere un punto finale (come in http://www.stackoverflow.com.).
• La parte del nome host di un collegamento può contenere parentesi angolari per indirizzi IPv6 come in http: // [:: 1] .
• Gli indirizzi IPv6 hanno anche intervalli per reti private o indirizzi locali di collegamento ecc.
• Se blocchi determinati indirizzi IPv4, tieni presente che ad esempio https://127.0.0.1 e https: // [:: ffff: 127.0.0.1] puntano alla stessa risorsa (se il dispositivo di loopback della tua macchina è pronto per IPv6 ).
• La parte del nome host degli URL ora può contenere Unicode, quindi l'intervallo di caratteri [-0-9a-zA-z]non è più sufficiente.
• Molti registri per domini di primo livello definiscono restrizioni specifiche, ad esempio sul set consentito di caratteri Unicode. Oppure suddividono il loro spazio dei nomi (come co.uke molti altri).
• I domini di primo livello non devono contenere cifre decimali e il trattino non è consentito se non per il prefisso dell'etichetta A IDN "xn--".
• I domini di primo livello Unicode (e la loro codifica punycode con "xn--") devono ancora contenere solo lettere ma chi vuole verificarlo in una regex?

Quale di queste limitazioni e regole si applica è una questione di requisiti e gusti del progetto.

Di recente ho scritto un validatore di URL per un'app Web adatta agli URL forniti dagli utenti in forum, social network o simili. Sentiti libero di usarlo come base per il tuo:

• Versione JavaScript / Typescript per il frontend (angolare)
• Versione Perl per il backend

Ho anche scritto un post sul blog The Gory Details of URL Validation con informazioni più approfondite.

Cambio la funzione in Match +, faccio una modifica qui con le barre e il suo lavoro: (http: // e https) entrambi

function isValidUrl(userInput) {
    var res = userInput.match(/(http(s)?:\/\/.)?(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)/g);
    if(res == null)
       return false;
    else
       return true;
}

Ecco solo un controllo molto semplice per assicurarti che esista un protocollo valido e che l'estensione del dominio deve contenere due o più caratteri.

is_valid_url = ( $url ) => {

    let $url_object = null;

    try {
        $url_object = new URL( $url );
    } catch ( $error ) {
        return false;
    }

    const $protocol = $url_object.protocol;
    const $protocol_position = $url.lastIndexOf( $protocol );
    const $domain_extension_position = $url.lastIndexOf( '.' );

    return (
        $protocol_position === 0 &&
        [ 'http:', 'https:' ].indexOf( $protocol ) !== - 1 &&
        $domain_extension_position > 2 && $url.length - $domain_extension_position > 2
    );

};

Se è necessario supportare anche https://localhost:3000utilizzare questa versione modificata del regex di [Devshed].

    function isURL(url) {
        if(!url) return false;
        var pattern = new RegExp('^(https?:\\/\\/)?'+ // protocol
            '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|'+ // domain name
            '((\\d{1,3}\\.){3}\\d{1,3}))|' + // OR ip (v4) address
            'localhost' + // OR localhost
            '(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*'+ // port and path
            '(\\?[;&a-z\\d%_.~+=-]*)?'+ // query string
            '(\\#[-a-z\\d_]*)?$', 'i'); // fragment locator
        return pattern.test(url);
    }

Esistono un paio di test che utilizzano il costruttore URL che non delineano se l'input è una stringa o un oggetto URL.

// Testing whether something is a URL
function isURL(url) {
    return toString.call(url) === "[object URL]";
}

// Testing whether the input is both a string and valid url:
function isUrl(url) {
    try {
        return toString.call(url) === "[object String]" && !!(new URL(url));
    } catch (_) {
        return false;  
    }
}

Aggiornamento 2020. Per espandere sia l'eccellente answerd di @iamnewton che @Fernando Chavez Herrera, ho iniziato a vedere che @viene utilizzato nel percorso degli URL.

Quindi il regex aggiornato è:

RegExp('(https?:\\/\\/)?((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|((\\d{1,3}\\.){3}\\d{1,3}))(\\:\\d+)?(\\/[-a-z\\d%_.~+@]*)*(\\?[;&a-z\\d%_.~+=-]*)?(\\#[-a-z\\d_]*)?$', 'i');

Se si desidera consentirlo nella stringa di query e nell'hash, utilizzare:

RegExp('(https?:\\/\\/)?((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|((\\d{1,3}\\.){3}\\d{1,3}))(\\:\\d+)?(\\/[-a-z\\d%_.~+@]*)*(\\?[;&a-z\\d%_.~+=-@]*)?(\\#[-a-z\\d_@]*)?$', 'i');

Detto questo, non sono sicuro che ci sia una regola del white paper che non consente @la stringa di query o l'hash.

Ci sono già molte risposte, ma ecco un altro contributo: preso direttamente dal URLcontrollo di validità del polyfill, usa un inputelemento con type="url"per sfruttare il controllo di validità integrato nel browser:

var inputElement = doc.createElement('input');
inputElement.type = 'url';
inputElement.value = url;

if (!inputElement.checkValidity()) {
    throw new TypeError('Invalid URL');
}

fonte