URL 문자열이 절대적인지 상대적인지 테스트하는 방법은 무엇입니까?
URL이 Javascript 또는 jQuery에서 상대 또는 절대 경로 인 경우 어떻게 테스트 할 수 있습니까? 전달 된 URL이 로컬 또는 외부 경로인지 여부에 따라 적절하게 처리하고 싶습니다.
if (urlString starts with http:// or https://)
//do this
var pat = /^https?:\/\//i;
if (pat.test(urlString))
{
//do stuff
}
프로토콜 상대 URL의 경우 다음 정규식을 사용하십시오.
/^https?:\/\/|^\/\//i
빠른
당신은 단지에 대한 테스트가 필요한 경우 http://
또는 https://
다음 가장 효율적인 방법입니다 :
if (urlString.indexOf('http://') === 0 || urlString.indexOf('https://') === 0)
만능인
그러나 더 보편적이고 대소 문자를 구분하지 않는 프로토콜에 구애받지 않는 접근 방식을 제안합니다.
var r = new RegExp('^(?:[a-z]+:)?//', 'i');
r.test('http://example.com'); // true - regular http absolute URL
r.test('HTTP://EXAMPLE.COM'); // true - HTTP upper-case absolute URL
r.test('https://www.exmaple.com'); // true - secure http absolute URL
r.test('ftp://example.com/file.txt'); // true - file transfer absolute URL
r.test('//cdn.example.com/lib.js'); // true - protocol-relative absolute URL
r.test('/myfolder/test.txt'); // false - relative URL
r.test('test'); // false - also relative URL
RegExp 설명
^(?:[a-z]+:)?//
^
-문자열의
(?:
시작-캡처되지 않은 그룹의 시작
[a-z]+
- 'a'에서 'z'까지의 모든 문자 1 회 이상
:
-문자열 (콜론 문자)
)?
-캡처되지 않은 그룹의 끝. 0 또는 1 번 나타나는 그룹
//
-문자열 (2 개의 슬래시 문자)
'i'
-대소 문자를 구분하지 않는 플래그
정규식 사용 :
if (/^(?:[a-z]+:)?\/\//i.test(url))
원래 답변
매우 신속 하고 매우 유연한 검사는 다음과 같습니다
if (url.indexOf('://') > 0 || url.indexOf('//') === 0 ) {
// URL is absolute; either "http://example.com" or "//example.com"
} else {
// URL is relative
}
다음과 같은 경우 절대 URL을 인식합니다.
- URL 에 첫 번째 문자 뒤에 ": //"가 포함되어 있거나
- "//"로 시작하는 URL (프로토콜 상대)
- 정규식이 없습니다.
- jQuery 또는 기타 종속성이 없습니다.
- 조건을 대소 문자를 구분하는 하드 코딩 된 프로토콜 이름이 없습니다.
- 문자열 조작이 없습니다 (예 : toLowerCase 또는 유사).
- "상대적 또는 절대적"만 검사하지만 다른 온 전성 검사는 수행하지 않으며 웹 URL 또는 모든 내부 프로토콜에 사용할 수 있습니다.
업데이트 1 (전체 기능 예)
다음은 주어진 URL에 대해 true / false를 반환 하는 빠른 함수 입니다.
function isUrlAbsolute(url) {
return (url.indexOf('://') > 0 || url.indexOf('//') === 0);
}
ES6에서도 동일합니다.
const isUrlAbsolute = (url) => (url.indexOf('://') > 0 || url.indexOf('//') === 0)
업데이트 2 (URL 매개 변수 내부의 URL)
URL을 형식으로 추가하려면 /redirect?target=http://example.org
다음 코드를 사용하는 것이 좋습니다.
function isUrlAbsolute(url) {
if (url.indexOf('//') === 0) {return true;} // URL is protocol-relative (= absolute)
if (url.indexOf('://') === -1) {return false;} // URL has no protocol (= relative)
if (url.indexOf('.') === -1) {return false;} // URL does not contain a dot, i.e. no TLD (= relative, possibly REST)
if (url.indexOf('/') === -1) {return false;} // URL does not contain a single slash (= relative)
if (url.indexOf(':') > url.indexOf('/')) {return false;} // The first colon comes after the first slash (= relative)
if (url.indexOf('://') < url.indexOf('.')) {return true;} // Protocol is defined before first dot (= absolute)
return false; // Anything else must be relative
}
짧은 형식과 ES 6도 동일합니다.
// Traditional JS, shortened
function isUrlAbsolute(url) {
return url.indexOf('//') === 0 ? true : url.indexOf('://') === -1 ? false : url.indexOf('.') === -1 ? false : url.indexOf('/') === -1 ? false : url.indexOf(':') > url.indexOf('/') ? false : url.indexOf('://') < url.indexOf('.') ? true : false;
}
// ES 6
const isUrlAbsolute = (url) => (url.indexOf('//') === 0 ? true : url.indexOf('://') === -1 ? false : url.indexOf('.') === -1 ? false : url.indexOf('/') === -1 ? false : url.indexOf(':') > url.indexOf('/') ? false : url.indexOf('://') < url.indexOf('.') ? true : false)
다음은 몇 가지 테스트 사례입니다.
// Test
console.log( isUrlAbsolute('http://stackoverflow.com') ) // -> true
console.log( isUrlAbsolute('//stackoverflow.com') ) // -> true
console.log( isUrlAbsolute('stackoverflow.com') ) // -> false
console.log( isUrlAbsolute('Ftp://example.net') ) // -> true
console.log( isUrlAbsolute('/redirect?target=http://example.org') ) // -> false
업데이트 3 (상대 URL 명시)
잘못된 출력에 대한 몇 가지 의견을 보았습니다.
- 솔루션이 다음에 대해 false를 반환합니다.
localhost
- 답변 실패
http:example.com
그러나 이러한 URL은 실제로 상대 URL 입니다. 테스트하기 쉽습니다.
- localhost 웹 루트에 몇 개의 폴더를 만듭니다.
a/b/c/
- index.html 파일을 만들고 다음 링크를 배치합니다.
<a href="localhost">test</a>
- Open the index page in your browser: http://localhost/a/b/c/index.html and click on the link. You will end on http://localhost/a/b/c/localhost (and not on http://localhost)
- Same happens when placing the link
http:example.com
into your index.html file. You end on http://localhost/a/b/c/example.com instead of http://example.com
Nowdays, when a lot of services use protocol-relative URL (eg. //cdn.example.com/libary.js), this method is safer:
var isAbsolute = new RegExp('^([a-z]+://|//)', 'i');
if (isAbsolute.test(urlString)) {
// go crazy here
}
Even more Universal RFC-compliant URI approach:
(?:^[a-z][a-z0-9+.-]*:|\/\/)
regex explanation
The other solutions listed here would fail for links like mailto:evan@nylas.com
RFC 3986 defines a Scheme as:
scheme = ALPHA *( ALPHA / DIGIT / "+" / "-" / "." )
3.1. Scheme https://tools.ietf.org/html/rfc3986#section-3.1
While the protocol-relative url is technically valid as per section 4.2, Paul Irish has swung back the other way and considers this an anti-pattern. See http://www.paulirish.com/2010/the-protocol-relative-url/
4.2. Relative Reference http://tools.ietf.org/html/rfc3986#section-4.2
If you'd like the regex without protocol-relative url's use:
^[a-z][a-z0-9+.-]*:
To see a full list of other types of valid uri edge cases, check out the list here: https://en.wikipedia.org/wiki/URI_scheme
var external = RegExp('^(https?:)?//');
if(external.test(el)){
// do something
}
EDIT:
With the next regular expression, you can even check if the link goes to the same domain or to an external one:
var external = RegExp('^((f|ht)tps?:)?//(?!' + location.host + ')');
if(external.test(el)){
// do something
}
Don't use low-level stuff like regexp etc. These things have been solved by so many other people. Especially the edge cases.
Have a look at URI.js, it should do the job: http://medialize.github.io/URI.js/docs.html#is
var uri = new URI("http://example.org/");
uri.is("absolute") === true;
Depending on your needs, I think that a more reliable way to determine this is to use the built-in URL interface to construct a couple URL objects and compare origins.
new URL(document.baseURI).origin === new URL(urlToTest, document.baseURI).origin;
This allows the browser to parse and figure all this out for you, without having to worry about the side effects of edge cases.
var adress = 'http://roflmao.com';
if (adress.substr(0,7) == 'http://' || adress.substr(0,8) == 'https://') {
//
}
Following function will get called when click even occurs on a hyperlink i.e 'a' tag if the tag contains url will be relative or contains same host then that new page will get loaded into same browser tab if it contains different url then page will load in new browser tab
jQuery(document).ready(function() {
$('a').click(function(){
var a = this;
var a_href = $(this).attr('href');
var regex = new RegExp('^(?:[a-z]+:)?//', 'i');
if(a.host == location.host || regex.test(a_href) == false){
a.target = '_self';
}else{
a.target = '_blank';
}
});
});
Here's a bulletproof approach to the problem:
Let the browser handle everything for us. No need for some complicated/error prone regexes.
const isAbsoluteUrl = (url) => {
const link = document.createElement('a');
link.href = url;
return link.origin + link.pathname + link.search + link.hash === url;
};
Unfortunately does not work in a nodejs environment.
var isExternalURL = url.toLowerCase().indexOf('http://') === 0 || url.toLowerCase().indexOf('https://') === 0 ;
참고URL : https://stackoverflow.com/questions/10687099/how-to-test-if-a-url-string-is-absolute-or-relative
'Programing' 카테고리의 다른 글
확장 가능한 ListView Android에서 선택한 그룹을 제외한 모든 그룹 축소 (0) | 2020.11.29 |
---|---|
메서드 선언으로 이동 (0) | 2020.11.29 |
iPhone 앱에서 카메라의 존재를 감지 하시겠습니까? (0) | 2020.11.29 |
오류 403 : 액세스가 구성되지 않았습니다. (0) | 2020.11.29 |
신속한 스크립트에서 터미널 명령을 어떻게 실행합니까? (0) | 2020.11.29 |