Перевірте, чи є рядок JavaScript URL

Чи існує спосіб у JavaScript перевірити, чи є рядок URL?

Регулярні вирази виключені , так як URL, швидше за все , написано як stackoverflow; це означає, що він може не мати .com, wwwабо http.

Пов'язане запитання з відповіддю:

Збірка URL-адрес у форматі Javascript

Або це Regexp від 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);
}

Ви можете спробувати використовувати URLконструктор : якщо він не кидає, рядок є дійсною URL-адресою:

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

  return true;
}

Термін "URL" визначений в RFC 3886 (як URI); вона повинна починатися з назви схеми, а назва схеми не обмежується http / https.

Помітні приклади:

• www.google.com недійсна URL-адреса (відсутня схема)
• javascript:void(0) є дійсною URL-адресою, хоча й не HTTP
• http://..є дійсною URL, з приймаючим буттям ..; чи буде вона вирішена, залежить від вашого DNS
• https://google..com дійсна URL-адреса, така ж, як і вище

Якщо ви хочете перевірити, чи є рядок дійсною URL-адресою HTTP:

function isValidHttpUrl(string) {
  let url;

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

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

Замість того, щоб використовувати регулярний вираз, я б рекомендував використовувати елемент якоря.

коли ви встановлюєте hrefвластивість anchor, встановлюються різні інші властивості.

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"

джерело

Однак якщо значення, hrefяке прив’язане до цього, не є дійсним URL-адресом, то значенням цих допоміжних властивостей буде порожній рядок.

Редагувати: як зазначено в коментарях: якщо використовується недійсна URL-адреса, властивості поточної URL-адреси можуть бути замінені.

Отже, поки ви не переходите в URL-адресу поточної сторінки, ви можете зробити щось на кшталт:

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

Я використовую функцію нижче, щоб перевірити URL з або без 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

Щоб перевірити URL-адресу за допомогою javascript, показано нижче

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

Покладайтеся на бібліотеку: https://www.npmjs.com/package/valid-url

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

Поліпшення прийнятої відповіді ...

• Перевірте ftp / ftps як протокол
• Подвійний ухил від косого кута (\\)
• Переконайтесь, що домени мають крапку та розширення (.com .io .xyz)
• Дозволяє повну товсту кишку (:), наприклад, http://thingiverse.com/download:1894343
• Дозволяє амперсанд (&) у шляху, наприклад http://en.wikipedia.org/wiki/Procter_&_Gamble

• Дозволяє символ @ у шляху, наприклад 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);
  }

Ось ще один метод.

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

(У мене немає повторень, щоб коментувати приклад ValidURL ; отже, опублікуйте це як відповідь.)

Хоча використання відносних URL-адрес протоколу не рекомендується ( URL-адреса щодо протоколу ), вони іноді працевлаштовуються. Для перевірки такої URL-адреси за допомогою регулярного виразу частина протоколу може бути необов'язковою, наприклад:

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

Як зазначали інші, регулярний вираз не видається найкращим підходом для перевірки URL-адрес.

Ви можете використовувати власний API URL :

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

Як було відмічено, ідеальний регулярний вираз є невловимим, але все ще здається розумним підходом (альтернативою є тести на стороні сервера або новий експериментальний URL-адрес URL ). Однак відповіді високого рейтингу часто повертають помилкові для загальних URL-адрес, але ще гірше буде заморожувати ваше додаток / сторінку на хвилини навіть на такому простому рядку isURL('aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa'). Це було зазначено в деяких коментарях, але, мабуть, не ввели поганого значення, щоб побачити це. Такі підвішування робить цей код непридатним у будь-яких серйозних програмах. Я думаю, що це пов'язано з неодноразовими нечутливими наборами у подібному коді ((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.?)+[a-z]{2,}|' .... Вийміть "я", і воно не висить, але, звичайно, не спрацює за бажанням. Але навіть з прапором ігнорування випадку ці тести відхиляють високі значення Unicode, які дозволені.

Найкраще, про що вже говорилося:

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

Це походить від Github segmentio / is-url . Хороша річ у сховищі коду - ви можете бачити тестування та будь-які проблеми, а також тестові рядки, що проходять через нього. Існує гілка, яка дозволить рядкам відсутній протокол на зразок google.com, хоча ви, мабуть, робите занадто багато припущень. Сховище було оновлено, і я не планую намагатися не відбиватися від дзеркала тут. Це було розбите на окремі тести , щоб уникнути RegEx Redos які можуть бути використані для атак DOS (я не думаю , що ви повинні турбуватися про те , що з на стороні клієнта JS, але ви повинні турбуватися про вашу сторінку висить так довго , що ваш відвідувач залишає ваш сайт).

Є ще одне сховище, яке я бачив, що може бути навіть кращим для isURL на dperini / regex-weburl.js , але воно дуже складне. У ньому є великий тестовий список дійсних та недійсних URL-адрес. Простий вище, як і раніше, передає всі позитиви і лише не блокує декілька дивних негативів, як http://a.b--c.de/і спеціальні ips.

Що б ви не вибрали, запустіть його за допомогою цієї функції, яку я адаптував із тестів на dperini / regex-weburl.js, використовуючи інспектор Інструментів для розробників вашого браузера.

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

А потім протестуйте цей рядок "a".

Дивіться це порівняння isURL regex від Mathias Bynens для отримання додаткової інформації перед тим, як опублікувати, здавалося б, великий регекс.

Я не можу коментувати публікацію, яка є найближчою # 5717133 , але нижче - це спосіб, яким я зрозумів, як змусити @ 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

Використовуйте validator.js

ES6

import isURL from 'validator/lib/isURL'

isURL(string)

Немає ES6

var validator = require('validator');

validator.isURL(string)

Ви також можете точно налаштувати поведінку цієї функції, передаючи необов'язковий optionsоб'єкт як другий аргументisURL

Ось optionsоб’єкт за замовчуванням :

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_whitelistі host_blacklistможуть бути масивами хостів. Вони також підтримують регулярні вирази.

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

Однією з функцій, яку я використовую для перевірки URL-адреси "рядок", є:

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

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

Ця функція поверне булеве значення, чи є рядок URL-адресою.

Приклади:

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

З чистим регулярним виразом це досить складно, оскільки URL-адреси мають багато "незручностей".

1. Наприклад, доменні імена мають складні обмеження на дефіси:

   а. У середині може бути багато послідовних дефісів.

   б. але перший символ і останній символ доменного імені не можуть бути дефісом

   c. Третій та четвертий символи не можуть бути обоє дефісів

2. Аналогічно номер порту може бути лише в межах 1-65535. Це легко перевірити, якщо ви витягаєте частину порту та перетворюєте на, intале досить складно перевірити регулярним виразом.

3. Також немає простого способу перевірити дійсні розширення домену. У деяких країнах є домени другого рівня (наприклад, "co.uk"), або розширення може бути довгим словом, таким як ". International". І нові TLD додаються регулярно. Цей тип речей можна перевірити лише у жорсткому коді. (див. https://en.wikipedia.org/wiki/Top-level_domain )

4. Потім є URL-адреси магнітів, ftp адреси тощо. Всі вони мають різні вимоги.

Тим не менш, тут є функція, яка керує майже всім, крім:

• Справа 1. c
• Приймає будь-який 1-5-значний номер порту
• Приймає будь-яке розширення 2-13 символів
• Не приймає ftp, магніт тощо.

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] + ']');
}

Я думаю, що використання API рідної URL-адреси краще, ніж складні схеми регулярних виразів, як запропонував @pavlo. Він має деякі недоліки, які ми можемо виправити за допомогою додаткового коду. Цей підхід не вдається для наступної дійсної URL-адреси.

//cdn.google.com/script.js

Ми можемо заздалегідь додати відсутній протокол, щоб уникнути цього. Він також не вдається виявити наступну недійсну URL-адресу.

http://w
http://..

Так навіщо перевіряти всю URL-адресу? ми можемо просто перевірити домен. Я запозичив регулярний вимір для підтвердження домену звідси .

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

hostnameАтрибут порожній рядок для javascript:void(0), тому вона працює для цього теж, і ви можете також додати IP - адреса верифікатор теж. Я хотів би дотримуватися найбільш рідного API, і сподіваюся, що він починає підтримувати все найближчим часом.

Питання задає метод перевірки URL-адреси, наприклад stackoverflow, без протоколу чи будь-якої крапки в імені хоста. Отже, справа не в тому, щоб перевірити sintax URL-адреси, а перевірити, чи є він дійсним URL-адресом, фактично викликавши його.

Я спробував декілька методів дізнатись, чи існує справжній URL-адрес і його можна дзвонити з браузера, але я не знайшов способу перевірити за допомогою Javascript заголовка відповіді на виклик:

• додавання елемента якоря чудово для випалу click()методу.
• Здійснювати виклик Ajax до складної URL-адреси 'GET'добре, але це різні обмеження через CORSполітику, і це не стосується використання ajax, оскільки URL-адреса може бути поза доменом мого сервера.
• використання API вибору має вирішення подібне до ajax.
• Інша проблема полягає в тому, що я маю свій сервер під httpsпротоколом і кидає виняток під час виклику незахищених URL-адрес.

Отже, найкращим рішенням, про який я можу придумати, є отримання інструменту для виконання CURLJavascript, який намагається щось подібне curl -I <url>. На жаль, я не знайшов жодного, і на вигляд це неможливо. Я буду вдячний за будь-які коментарі з цього приводу.

Але, врешті-решт, у мене працює сервер, PHPі коли я використовую Ajax майже для всіх своїх запитів, я написав функцію на стороні сервера, щоб виконати запит на згортання там і повернутися до браузера.

Щодо URL-адреси одного слова у запитанні "stackoverflow", це призведе мене до того https://daniserver.com.ar/stackoverflow, де daniserver.com.ar - це мій власний домен.

Це здається однією з найскладніших проблем у CS;)

Ось ще одне неповне рішення, яке працює для мене досить добре і краще, ніж інші, які я тут бачив. Я використовую для цього input [type = url] для підтримки IE11, інакше було б набагато простіше використовувати window.URL замість цього:

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

Для того, щоб прийняти неповні дані, такі як "www.mydomain.com", це також зробить його дійсним, якщо в цих випадках протокол є "http" і поверне дійсну URL-адресу, якщо адреса є дійсною. Він повертає false, коли недійсний.

Він також підтримує домени IPv4, але не IPv6.

У моєму випадку моя єдина вимога - щоб введення користувача не було інтерпретовано як відносне посилання, коли воно розміщується в href тегу, і відповіді тут були або трохи OTT для цього, або дозволені URL-адреси не відповідають моїм вимогам, так що це це те, з чим я йду:

^https?://.+$

Те ж саме можна було б досягти досить легко без регулярних виразів.

це працює зі мною

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

Якщо ви можете змінити тип введення, я думаю, що це рішення було б набагато простіше:

Ви можете просто використовувати type="url"у своєму введенні та перевірити його checkValidity()у js

Наприклад:

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

Це виклично не найефективніший підхід, але він легко читається та легко формується до всього, що вам потрібно. І тут легше додати регулярний вираз / складність. Тож ось дуже прагматичний підхід

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

ТЕСТ:

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

Матіас Байненс склав список відомих URL - адрес з тестовими URL-адресами. Існує мало підстав писати новий регулярний вираз; просто виберіть існуючий, який вам найбільше підходить.

Але таблиця порівняння для цих регексів також показує, що перевірити URL-адресу поряд з одним регулярним виразом неможливо. Усі регекси в списку Байненса створюють помилкові позитиви та хибні негативи.

Я пропоную скористатися наявним аналізатором URL-адрес (наприклад, new URL('http://www.example.com/')у JavaScript), а потім застосувати перевірки, які ви хочете виконати, проти розбору та нормалізованої форми URL-адреси. її компоненти. Використання URLінтерфейсу JavaScript має додаткову перевагу, що він прийме лише такі URL-адреси, які дійсно прийняті браузером.

Також слід пам’ятати, що технічно неправильні URL-адреси все ще можуть працювати. Наприклад http://w_w_w.example.com/, http://www..example.com/, http://123.example.com/всі вони мають неприпустиму ім'я хоста частина , але кожен браузер я знаю , що буде намагатися відкрити їх без скарг, а також при вказівці IP - адреси для цих неприпустимих імен/etc/hosts/ таких URL - адрес буде навіть працювати , але тільки на вашому комп'ютері.

Питання полягає в тому не в тому, чи є URL-адресою дійсною, а в тому, які URL-адреси працюють і їх слід дозволити в конкретному контексті.

Якщо ви хочете зробити перевірку URL-адрес, є багато деталей та кращих справ, які легко не помітити:

• URL-адреси можуть містити облікові дані, як у http://user:password@www.example.com/ .
• Номери портів повинні бути в діапазоні 0-65535, але ви все ще можете виключити підстановочний порт 0.
• Номери портів можуть мати провідні нулі, як у http://www.example.com:000080/ .
• Адреси IPv4 ні в якому разі не обмежуються чотирма десятковими цілими числами в діапазоні 0-255. Можна використовувати одне-чотири цілі числа, і вони можуть бути десятковими, вісімковими або шістнадцятковими. URL-адреси https: //010.010.000010.010/ , https: //0x8.0x8.0x0008.0x8/ , https: //8.8.2056/ , https: //8.526344/ , https: // 134744072 / , всі дійсні та просто творчі способи написання https://8.8.8.8/ .
• Дозволення адрес зворотного зв'язку ( http://127.0.0.1/ ), приватних IP-адрес ( http://192.168.1.1 ), локальних адрес посилань ( http://169.254.100.200 ) тощо може вплинути на безпеку або конфіденційність. Якщо, наприклад, ви дозволите їх як адресу аватарів користувачів на форумі, ви змусите браузери користувачів надсилати непотрібні мережеві запити в їх локальній мережі та в Інтернеті, такі запити можуть спричинити смішні та не такі смішні речі трапляються у вашому домі.
• З тих же причин ви можете відмовитись від посилань на не повністю кваліфіковані імена хостів, іншими словами імена хостів без крапки.
• Але імена хостів завжди можуть мати крапку (як у http://www.stackoverflow.com.).
• Частина імені хоста посилання може містити кутові дужки для адрес IPv6, як у http: // [:: 1] .
• IPv6 адреси також мають діапазони для приватних мереж або локальних адрес тощо.
• Якщо ви блокуєте певні адреси IPv4, майте це на увазі, наприклад https://127.0.0.1 та https: // [:: ffff: 127.0.0.1] вказують на той самий ресурс (якщо пристрій циклу зворотного зв’язку на вашій машині готовий до IPv6 ).
• Частина URL-адрес імені хоста тепер може містити Unicode, так що діапазон символів [-0-9a-zA-z], безумовно, вже не є достатнім.
• Багато реєстрів для доменів верхнього рівня визначають конкретні обмеження, наприклад, дозволений набір символів Unicode. Або вони підрозділяють простір своїх імен (як co.ukі багато інших).
• Домени верхнього рівня не повинні містити десяткових цифр, а дефіс не дозволений, якщо не встановлено префікс A-label IDN "xn--".
• Unicode домени верхнього рівня (та їхнє кодування punycode за допомогою "xn--") все одно повинні містити лише літери, але хто хоче перевірити це в регулярному виразі?

Яке з цих обмежень та правил застосовується - це питання вимог та смаку проекту.

Нещодавно я написав валідатор URL-адрес для веб-програми, яка підходить для наданих користувачем URL-адрес на форумах, соціальних мережах тощо. Не соромтеся використовувати його як базу для свого власного:

• Версія JavaScript / Typescript для (кутового) фронту
• Версія Perl для бекенда

Я також написав допис у блозі The Gory Details of URL Validation with more глибокі відомості.

Я змінюю функцію на Match +, вношу зміни тут з косою рисою та її роботою: (http: // і https) обидва

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

Ось лише дуже проста перевірка, щоб переконатися, що існує дійсний протокол, а розширення домену має містити два чи більше символів.

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

};

Якщо вам також потрібно підтримати, https://localhost:3000скористайтеся цією модифікованою версією [Devshed] s регулярного виразу.

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

Існує пара тестів з використанням конструктора URL, які не визначають, чи є вхідним рядком або 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;  
    }
}

Оновлення 2020 року. Щоб розширитись як на відмінний відповідь від @iamnewton, так і на @Fernando Chavez Herrera, я почав бачити, що @його використовують у шляху URL-адрес.

Отже, оновлений регулярний вираз:

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

Якщо ви хочете дозволити це у рядку запиту та хеші, скористайтеся:

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

Зважаючи на це, я не впевнений, що @в рядку запиту чи хеші є правило, яке не допускається .

Відповідей уже багато, але ось ще один внесок: Отриманий безпосередньо з URLперевірки дійсності поліфактури, використовуйте inputелемент, type="url"щоб скористатися вбудованою перевіркою дійсності браузера:

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

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

Джерело