Sprawdź, czy łańcuch Javascript jest adresem url

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);
}

Zamiast używać wyrażenia regularnego, zalecałbym użycie elementu kotwicy.

Gdy ustawisz właściwość href anchor, ustawiane są różne inne właściwości.

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"

Źródło

Jeśli jednak wartość href jest powiązana z nie jest poprawnym adresem url, wtedy wartością tych właściwości pomocniczych będzie pusty łańcuch.

Edit: jak zaznaczono w komentarzach: jeśli używany jest nieprawidłowy adres url, właściwości bieżącego Adres URL może być podstawiony.

Tak długo, jak nie podajesz adresu URL bieżącej strony, możesz zrobić coś takiego:

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

Możesz spróbować użyć URL Konstruktor: Jeśli nie rzuca, łańcuch jest poprawnym adresem URL:

const isValidUrl = (string) => {
  try {
    new URL(string);
    return true;
  } catch (_) {
    return false;  
  }
}

Aby zweryfikować adres URL za pomocą javascript jest pokazany poniżej

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;
  }
}

Poprawa w zakresie zaakceptowanej odpowiedzi...

• ma podwójne ucieczki dla ukośników wstecznych (\\)
• zapewnia, że domeny mają kropkę i rozszerzenie (. com. io .xyz)
• pozwala na pełny dwukropek (:) w ścieżce np. http://thingiverse.com/download:1894343
• pozwala ampersand ( & ) w ścieżce np http://en.wikipedia.org/wiki/Procter_&_Gamble

• Pozwala na umieszczenie symbolu @ w ścieżce np. https://medium.com/@techytimo

  isURL(str) {
    var pattern = new RegExp('^(https?:\\/\\/)?'+ // 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);
  }
  

Polegaj na bibliotece: https://www.npmjs.com/package/valid-url

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

(nie mam reps do komentowania ValidURL Przykład; stąd post this jako odpowiedź.)

Podczas gdy używanie adresów URL względnych do protokołu nie jest zalecane ( adres URL względny do Protokołu ), czasami są one wykorzystywane. Aby zweryfikować taki adres URL za pomocą wyrażenia regularnego, część protokołu może być opcjonalna, np.:

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;
    }
}

Jak zauważyli inni, Wyrażenie regularne nie wydaje się być najlepiej dopasowanym podejściem do walidacji adresów URL.

Używam poniższej funkcji do walidacji adresu URL z lub bez 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);
  if (res == null)
    return false;
  else
    return true;
};

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

Oto kolejna metoda.

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'));

Nie mogę skomentować posta, który jest najbliższy #5717133, ale poniżej jest sposób, w jaki zorientowałem się, jak uzyskać regex @ tom-gullen działa.

/^(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

Jak zauważono, idealny regex jest nieuchwytny, ale nadal wydaje się być rozsądnym podejściem (alternatywami są testy po stronie serwera lub nowy eksperymentalny URL API ). Jednak wysokie odpowiedzi często zwracają false dla popularnych adresów URL, ale co gorsza, zamrozi Twoją aplikację / stronę na kilka minut nawet na tak prostym łańcuchu jak isURL('aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa'). Zostało to zaznaczone w niektórych komentarzach, ale najprawdopodobniej nie wprowadziłem złej wartości, aby to zobaczyć. Wiszące w ten sposób powoduje, że kod jest bezużyteczny w każdym poważne podanie. Myślę, że wynika to z powtarzających się zestawów niewrażliwych na wielkość liter w kodzie jak ((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.?)+[a-z]{2,}|' .... Wyjmij "ja" i nie wisi, ale oczywiście nie będzie działać zgodnie z życzeniem. Ale nawet z flagą ignoruj wielkość liter te testy odrzucają wysokie wartości unicode, które są dozwolone.

Najlepsze już wspomniane to:

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

Jest jeszcze jedno repozytorium, które widziałem, że Może być nawet lepsze dla isURL w dperini / regex-weburl.js, ale to jest bardzo złożone. Ma większą listę testów poprawnych i nieprawidłowych adresów URL. Ten prosty powyżej nadal przechodzi wszystkie pozytywy i nie blokuje tylko kilku dziwnych negatywów, takich jak http://a.b--c.de/, a także specjalnych adresów IP.

Cokolwiek wybierzesz, uruchom go przez tę funkcję, którą zaadaptowałem z testów na dperini / regex-weburl.js, podczas używania narzędzia programistyczne Twojej przeglądarki inpector.

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:[email protected]:8080"));
console.assert(isURL("http://userid:[email protected]:8080/"));
console.assert(isURL("http://[email protected]"));
console.assert(isURL("http://[email protected]/"));
console.assert(isURL("http://[email protected]:8080"));
console.assert(isURL("http://[email protected]:8080/"));
console.assert(isURL("http://userid:[email protected]"));
console.assert(isURL("http://userid:[email protected]/"));
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:[email protected]:5702/db"));
console.assert(isURL("https://[email protected]/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"));}

A następnie przetestuj ten ciąg 'a'.

Zobacz to porównanie izurl regex przez Mathias Bynens aby uzyskać więcej informacji, zanim opublikujesz pozornie wielkie regex.

Jedną z funkcji, której używam do walidacji adresu URL "string" jest:

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

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

Ta funkcja zwróci wartość logiczną, czy łańcuch jest adresem URL.

Przykłady:

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

Możesz użyć natywnego API URL :

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

Pytanie zadaje metodę walidacji dla adresu url, takiego jak stackoverflow, bez protokołu lub kropki w nazwie hosta. Tak więc nie jest to kwestia walidacji adresu url sintax, ale sprawdzanie, czy jest to poprawny adres url, przez wywołanie go.

Próbowałem kilku metod, aby wiedzieć, czy adres URL true istnieje i można go wywołać z poziomu przeglądarki, ale nie znalazłem sposobu, aby przetestować za pomocą javascript nagłówek odpowiedzi połączenia:

• dodanie elementu kotwiącego jest dobre do odpalenia click() metoda.
• wykonywanie połączenia ajax do trudnego adresu url z 'GET' jest w porządku, ale ma różne ograniczenia ze względu na CORS zasady i nie jest to przypadek użycia ajax, ponieważ jako adres URL może być jakikolwiek poza domeną mojego serwera.
W przeciwieństwie do ajax, Api Api Api Api Api Api Api Api Api Api Api Api Api Api Api Api Api Api Api Api Api Api Api Api Api Api Api Api Api
• inny problem polega na tym, że mam serwer pod protokołem https i rzuca wyjątek podczas wywoływania Nie bezpiecznych adresów URL.

Więc najlepszym rozwiązaniem, jakie przychodzi mi do głowy, jest uzyskanie niektóre narzędzie do wykonywania {[6] } przy użyciu javascript próbuje coś w rodzaju curl -I <url>. Niestety nie znalazłem żadnego I w pewnym sensie nie jest to możliwe. Będę wdzięczny za wszelkie uwagi na ten temat.

Ale w końcu mam serwer uruchomiony PHP i ponieważ używam Ajax dla prawie wszystkich moich żądań, napisałem funkcję po stronie serwera, aby wykonać tam żądanie curl i wrócić do przeglądarki.

Jeśli chodzi o jedno słowo url na pytanie "stackoverflow" to doprowadzi mnie do https://daniserver.com.ar/stackoverflow, gdzie daniserver.com.ar to moja własna domena.

Myślę, że używanie natywnegoURL API jest lepsze niż złożone wzorce regex, jak sugerował @pavlo. Ma jednak pewne wady, które możemy naprawić za pomocą dodatkowego kodu. To podejście nie powiedzie się dla następującego poprawnego adresu url.

//cdn.google.com/script.js

Możemy dodać brakujący protokół wcześniej, aby tego uniknąć. Nie wykrywa również nieprawidłowego adresu url.

http://w
http://..

Po co więc sprawdzać cały adres url? możemy sprawdzić domenę. pożyczyłem regex do weryfikacji domeny z tutaj .

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;
    }
}

Atrybut hostname jest pustym łańcuchem dla javascript:void(0), więc działa również dla tego, a także możesz dodać weryfikator adresów IP. Chciałbym trzymać się najbardziej natywnego API i mam nadzieję, że zacznie wspierać wszystko w najbliższej przyszłości.

To chyba jeden z najtrudniejszych problemów w CS ;)

Oto kolejne niekompletne rozwiązanie, które działa dla mnie wystarczająco dobrze i lepiej niż inne, które widziałem tutaj. Używam do tego wejścia[type=url] w celu obsługi IE11, w przeciwnym razie byłoby znacznie prostsze użycie okna.Adres URL do przeprowadzenia walidacji:

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:[email protected]'),
  validateUrl('https://google.com'),
  validateUrl('100.100.100.100/abc'),
  validateUrl('100.100.100.256/abc')); // false

W celu przyjęcia niekompletnych danych wejściowych, takich jak "www.mydomain.com" będzie to również ważne zakładając, że protokół jest "http" w te przypadki i zwracanie poprawnego adresu URL, jeśli adres jest prawidłowy. Zwraca false, gdy jest nieprawidłowy.

Obsługuje również domeny IPv4, ale nie IPv6.