자바 스크립트 문자열이 URL인지 확인

JavaScript에서 문자열이 URL인지 확인하는 방법이 있습니까?

URL은 다음과 같이 작성 될 가능성이 높기 때문에 RegExes는 제외됩니다 stackoverflow. 즉 .com, www또는 이 없을 수도 있습니다 http.

답변이있는 관련 질문 :

자바 스크립트 정규식 URL 일치

또는 Devshed 의이 Regexp :

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) HTTP는 아니지만 유효한 URL입니다.
• http://..유효한 URL이며 호스트 는 ..; 해결 여부는 DNS에 따라 다릅니다.
• https://google..com 위와 동일한 유효한 URL입니다.

문자열이 유효한 HTTP URL인지 확인하려면 다음을 수행하십시오.

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의 속성이 대체 될 수 있습니다.

따라서 현재 페이지의 URL을 전달하지 않는 한 다음과 같은 작업을 수행 할 수 있습니다.

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

아래 기능을 사용하여 URL의 유무에 관계없이 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을 확인하는 방법은 다음과 같습니다.

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

( 유효한 URL 예제 에 대해 언급 할 담당자가 없으므로 답변으로 게시하십시오.)

프로토콜 상대 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을 확인하는 데 가장 적합한 방법은 아닙니다.

URL 기본 API를 사용할 수 있습니다 .

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

언급했듯이 완벽한 정규 표현식은 애매하지만 여전히 합리적인 접근법 인 것 같습니다 (대안은 서버 측 테스트 또는 새로운 실험 URL API입니다 ). 그러나 높은 순위의 답변은 종종 일반적인 URL에 대해 false를 반환하지만 심지어 더 단순한 문자열조차도 몇 분 동안 앱 / 페이지를 정지시킵니다 isURL('aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa'). 일부 의견에서 지적되었지만, 아마도 그것을보기 위해 나쁜 가치를 입력하지 않았을 것입니다. 그렇게 매달려 있으면 심각한 응용 프로그램에서 해당 코드를 사용할 수 없습니다. 코드와 같이 대소 문자를 구분하지 않는 반복 된 세트 때문이라고 생각합니다 ((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.?)+[a-z]{2,}|' .... 'i'를 꺼내면 멈추지 않지만 물론 원하는대로 작동하지 않습니다. 그러나 대소 문자 무시 플래그를 사용하더라도 이러한 테스트는 허용되는 높은 유니 코드 값을 거부합니다.

이미 언급 된 가장 좋은 것은 :

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

그것은 Github segmentio / is-url에서 온 것 입니다. 코드 리포지토리의 좋은 점은 테스트 및 모든 문제와 테스트 문자열이 실행되는 것을 볼 수 있다는 것입니다. 프로토콜이 누락 된 문자열을 허용하는 분기가 google.com있지만 아마도 너무 많은 가정을하고있을 것입니다. 저장소가 업데이트되었으며 여기에 미러를 유지하려고하지 않습니다. DOS 공격에 악용 될 수있는 RegEx redos 를 피하기 위해 별도의 테스트로 분류되었습니다. 방문자가 사이트를 떠남).

내가 본 또 다른 저장소 는 dperini / regex-weburl.js 에 isURL에 더 좋을 수도 있지만 매우 복잡합니다. 유효하고 유효하지 않은 URL의 더 큰 테스트 목록이 있습니다. 위의 간단한 것은 여전히 ​​모든 긍정을 통과 http://a.b--c.de/하고 특별한 ips 와 같은 몇 가지 이상한 부정을 막지 못합니다 .

어느 것을 선택하든 브라우저의 Developer Tools inpector를 사용하면서 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'의 문자열을 테스트하십시오.

겉보기에 훌륭한 정규식을 게시하기 전에 자세한 정보는 Mathias Bynens 의 isURL 정규식 비교를 참조하십시오 .

가장 가까운 # 5717133 게시물에 댓글을 달 수 없지만 아래는 @ tom-gullen 정규 표현식을 작동시키는 방법을 알아 낸 방법입니다.

/^(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. 예를 들어 도메인 이름에는 하이픈에 대한 복잡한 제한이 있습니다.

   ㅏ. 중간에 연속적인 하이픈이 많이있을 수 있습니다.

   비. 도메인 이름의 첫 문자와 마지막 문자는 하이픈 일 수 없습니다

   씨. 3 번째와 4 번째 문자는 모두 하이픈 일 수 없습니다

2. 마찬가지로 포트 번호는 1-65535 범위에만있을 수 있습니다. 이것은 포트 부분을 추출하고 변환하는 int것이 쉽지만 정규식으로 확인하기는 매우 어렵습니다.

3. 유효한 도메인 확장명을 쉽게 확인할 수있는 방법도 없습니다. 일부 국가에는 2 단계 도메인 (예 : 'co.uk')이 있거나 확장명이 '.international'과 같은 긴 단어 일 수 있습니다. 그리고 새로운 TLD가 정기적으로 추가됩니다. 이러한 유형의 항목은 하드 코딩 된 목록에 대해서만 확인할 수 있습니다. ( https://en.wikipedia.org/wiki/Top-level_domain 참조 )

4. 그런 다음 자석 URL, ftp 주소 등이 있습니다. 이들은 모두 서로 다른 요구 사항이 있습니다.

그럼에도 불구하고 여기를 제외한 거의 모든 것을 처리하는 함수가 있습니다.

• 사례 1. c
• 1-5 자리 포트 번호 허용
• 확장명 2-13자를 허용합니다.
• ftp, magnet 등은 허용하지 않습니다.

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

@pavlo가 제안한 것처럼 네이티브 URL API를 사용하는 것이 복잡한 정규식 패턴보다 낫다고 생각합니다. 추가 코드로 해결할 수있는 단점이 있습니다. 이 접근 방식은 다음 유효한 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를 최대한 활용하고 가까운 장래에 모든 것을 지원하기를 바랍니다.

이 질문은 stackoverflow프로토콜이나 호스트 이름에 점이없는 등의 URL에 대한 유효성 검사 방법을 묻습니다 . 따라서 URL sintax의 유효성을 검사하는 것이 아니라 실제로 호출하여 유효한 URL인지 확인하는 것입니다.

URL true가 존재하고 브라우저 내에서 호출 가능한지 알기 위해 여러 가지 방법을 시도했지만 호출의 응답 헤더를 javascript로 테스트하는 방법을 찾지 못했습니다.

• 앵커 요소를 추가하면 click()메소드 를 실행하는 것이 좋습니다.
• 도전적인 URL로 아약스를 호출하는 것은 'GET'좋지만 CORS정책 으로 인해 다양한 제한 사항 이 ajax있으며 URL이 내 서버 도메인 외부에있을 수 있기 때문에을 사용하는 경우는 아닙니다 .
• 페치 API를 사용하면 ajax와 비슷한 해결 방법이 있습니다.
• 다른 문제는 https프로토콜에 따라 서버 가 있고 비보안 URL을 호출 할 때 예외가 발생한다는 것입니다.

그래서 내가 생각할 수있는 가장 좋은 해결책 CURL은와 같은 것을 시도하는 자바 스크립트 를 사용 하여 수행 할 수있는 도구를 얻는 것 curl -I <url>입니다. 불행히도 나는 아무것도 찾지 못했고 그것이 불가능합니다. 이에 대한 의견을 부탁드립니다.

그러나 결국 서버가 실행 중이며 PHP거의 모든 요청에 ​​Ajax를 사용함에 따라 서버 측에서 컬 요청을 수행하고 브라우저로 돌아가는 기능을 작성했습니다.

질문 'stackoverflow'의 한 단어 url에 대해서는 https://daniserver.com.ar/stackoverflowdaniserver.com.ar가 내 도메인입니다.

이것은 CS에서 가장 어려운 문제 중 하나 인 것 같습니다.)

여기에 내가 보았던 다른 것보다 잘 작동하고 더 잘 작동하는 불완전한 다른 솔루션이 있습니다. IE11을 지원하기 위해 input [type = url]을 사용하고 있습니다. 그렇지 않으면 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);
        });
    });
});

Mathias Bynens는 테스트 URL 이있는 잘 알려진 URL 정규식 목록을 작성했습니다 . 새로운 정규식을 작성할 이유가 거의 없습니다. 가장 적합한 기존 것을 선택하십시오.

그러나 이러한 정규 표현식에 대한 비교 테이블은 단일 정규 표현식으로 URL 유효성 검사를 수행하는 것이 불가능하다는 것을 보여줍니다. Bynens의 목록에있는 모든 정규 표현식은 오탐 (false positive)과 오탐 (false negative)을 생성합니다.

기존 URL 구문 분석기 (예 new URL('http://www.example.com/'): JavaScript)를 사용하고 구문 분석되고 정규화 된 URL 형식의 양식에 대해 수행하려는 검사를 적용하는 것이 좋습니다 . 구성 요소. JavaScript URL인터페이스를 사용하면 브라우저에서 실제로 허용되는 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/ 과 같이 앞에 0이 표시 될 수 있습니다 .
• IPv4 주소는 0-255 범위의 십진수 4 개로 제한되지 않습니다. 1-4 개의 정수를 사용할 수 있으며 10 진수, 8 진수 또는 16 진수 일 수 있습니다. 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.).
• 링크의 호스트 이름 부분에는 http : // [:: 1] 과 같이 IPv6 주소의 꺾쇠 괄호가 포함될 수 있습니다 .
• IPv6 주소에는 개인 네트워크 또는 링크 로컬 주소 등의 범위도 있습니다.
• 특정 IPv4 주소를 차단하면 예를 들어 https://127.0.0.1 및 https : // [:: ffff : 127.0.0.1] 이 동일한 리소스를 가리 킵니다 (시스템의 루프백 장치가 IPv6 준비된 경우) ).
• URL의 호스트 이름 부분에 유니 코드가 포함될 수 있으므로 문자 범위 [-0-9a-zA-z]가 더 이상 충분하지 않습니다.
• 최상위 도메인에 대한 많은 레지스트리는 허용 된 유니 코드 문자 집합과 같은 특정 제한을 정의합니다. 또는 네임 스페이스를 세분화합니다 (예 : co.uk기타).
• 최상위 도메인은 십진수를 포함 할 수 없으며 IDN A 레이블 접두어 "xn--"이 아닌 경우 하이픈을 사용할 수 없습니다.
• 유니 코드 최상위 도메인 (및 "xn--"을 사용하는 퓨니 코드 인코딩)은 여전히 ​​문자 만 포함해야하지만 정규식에서이를 확인하려는 사람은 누구입니까?

이러한 제한 및 규칙 중 적용되는 것은 프로젝트 요구 사항 및 취향에 대한 문제입니다.

최근에 포럼, 소셜 네트워크 등에서 사용자 제공 URL에 적합한 웹 앱용 URL 유효성 검사기를 작성했습니다. 자신의 기반으로 자유롭게 사용하십시오.

• (Angular) 프론트 엔드 용 JavaScript / Typescript 버전
• 백엔드 용 Perl 버전

더 자세한 정보가 담긴 블로그 게시물 The Gory Details of URL Validation 도 작성했습니다 .

함수를 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;
}

다음은 유효한 프로토콜이 있는지 확인하기위한 매우 간단한 점검이며 도메인 확장자는 2 자 이상이어야합니다.

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] 정규식을 사용하십시오.

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

출처