[ 자바스크립트 ] 웹주소 쪼개기 1

웹주소와 같은 인터넷 식별자(URI)를, 구문(?)별로 나눠주는 함수를 만들어보았다.
function parsingURI ()

백문이 불여일견!

아래 버튼을 눌러보시오!! ^^*

 
<button onclick="separateHref ()"> 클릭하세요 </button>
<p id="demo"></p>
 

 
<script type="text/javascript">

function separateHref () { 

	 var href_of_this_page = location.href; 

	 var separate = parsingURI ( href_of_this_page ) ; 

	 var text = ""; 

	 for ( var n = 0; n < separate.length; n++ ) { 
		 text += "[ " + n + " ] " + separate [ n ] + "<br />"; 
	 } 

	 document.getElementById( "demo" ).innerHTML = text; 
} 

</script>
 

---

인터넷에서 다음과 같은 정규식을 구해와서,

└→ /^(([^:/?#]+):)?(\/\/([^/?#]*))?([^?#]*)(\?([^#]*))?(#(.*))?/ ( ☞ 출처 )

아래처럼 바꿔서 사용하였다.

└→ /^([^:/?#]+:)?(\/{2})?([^/?#]*)?([^?#]*)(\?[^#]*)?(#.*)?/

참고로, URI에는 아래와 같은 형태가 있다. ( 테스트용 가짜 주소들 )

// ex) uri://user:pass@example.com:123/one/two.three?q1=a1&q2=a2#bod

// ex) http://foo.com/posts?id=30&limit=5#time=1305298413

// ex) http://example.org/foo?bar=baz

// ex) ftp://ftp.is.co.za/rfc/rfc1808.txt

// ex) ldap://[2001:db8::7]/c=GB?objectClass?one

// ex) mailto:John.Doe@example.com

// ex) news:comp.infosystems.www.servers.unix

// ex) tel:+1-816-555-1212

// ex) telnet://192.0.2.16:80/

// ex) urn:oasis:names:specification:docbook:dtd:xml:4.1.2

0 = 전체 URI

1 = 프로토콜 ( protocol, scheme )

2 = //

3 = 호스트 이름 + 포트 번호 ( hostname + port )

4 = uri의 경로 ( pathname )

5 = 물음표(?)가 들어간 쿼리 부분 ( querystring, search )

6 = 해시 기호(#)가 들어간 프라그먼트 부분 ( fragment, hash )

 
<!-- fake URI for testing ::: uri://user:pass@example.com:123/one/two.three?q1=a1&q2=a2#bod -->

<input id="myURI" type="text" value="uri://user:pass@example.com:123/one/two.three?q1=a1&q2=a2#bod" /> 
<button onclick="myFunction()"> 클릭하세요 </button>

<p id="demo1"></p>
<p id="demo2"></p>
 

 
<script type="text/javascript">

function myFunction () { 

	 var value = document.getElementById( "myURI" ).value; 

	 var arrayUri = parsingURI ( value ); 

	 var text = ""; 

	 for ( var n = 0; n < arrayUri.length; n++ ) { 
		 text += "[ " + n + " ] " + arrayUri [ n ] + "<br />"; 
	 } 

	 var host = arrayUri [ 3 ]; 

	 document.getElementById( "demo1" ).innerHTML = text; 
	 document.getElementById( "demo2" ).innerHTML = '"A host of that URI" is ' + host; 
} 

</script>
 

---

 
<script type="text/javascript"> 

// 만든이 : http://tonks.tistory.com/90

function parsingURI ( uri ) { 

	 var regExp = /^([^:/?#]+:)?(\/{2})?([^/?#]*)?([^?#]*)(\?[^#]*)?(#.*)?/; 
	 // original source is /^(([^:/?#]+):)?(\/\/([^/?#]*))?([^?#]*)(\?([^#]*))?(#(.*))?/ 

	 var splitUp = uri.match( regExp ); 
	 // 또는 var splitUp = regExp.exec ( uri ); 

	 if ( splitUp == null ){  return null;  } 

	 for ( var n = 0; n < splitUp.length; n++ ) { 

		 if ( splitUp[ n ] == undefined ){  splitUp[ n ] = "";  } 

		 else {  splitUp[ n ] = decodeURI( splitUp[ n ] );  } 
		 // decodeURI  - 기호로 변환된 문자를 일반 문자로 바꾸기. converting the coded text into plain text. 
		 // 반대로 한다면 (if you want in reverse) - splitUp[ n ] = encodeURI( splitUp[ n ] ); 
	 } 

	 return splitUp; 
} 

/* 
 * splitUp[ 0 ] ::: full URI 
 * splitUp[ 1 ] :::  protocol ( scheme ) 
 * splitUp[ 2 ] ::: //
 * splitUp[ 3 ] ::: host ( hostname + port number ) 
 * splitUp[ 4 ] ::: pathname 
 * splitUp[ 5 ] ::: querystring ( search ) 
 * splitUp[ 6 ] ::: fragment ( hash ) 
*/ 

</script>
 

참고할만한 자료 사이트 :
☞ regex-weburl.js (GitHubGist) : URL이 맞는지 확인하기 위한 정규식이며, 무료 배포 자료임.

이 내용이 도움이 되셨다면, 아래의 하트 버튼을 눌러주세요. *^^*