요즘은 언어들이 사용하기도 편해지고, 퍼포먼스도 꽤나 좋아져서, 한 가지 언어로만 개발하는 추세는 절대 아닌 듯 합니다..
저도 C++을 주력으로 하는 개발을 하고 있지만, 어쩌다보니 자바스크립트를 건드리고 있네요..
아주 간단한 자바스크립트이기 때문에 부담스럽지는 않지만..
이번 기회에 자바스크립트도 알 수 있으면 더욱 좋은 기회가 아닐까 싶어서, 생각날 때마다 정리해보려고 합니다.
이번 포스팅에서 정리하려는 내용은 자바스크립트를 이용하여 URL 내용에서 파라미터 값을 가져오는 방법입니다.
쉽게 설명하면 다음과 같습니다.
1 | http://blankspace-dev.tistory.com?age=99&name=blankspace | cs |
위에 주소에서 age를 함수에 입력하면 99라는 값을 얻고, name을 blankspace 라는 값을 얻고자 하는 함수를 만들어 보려고 합니다.
1 2 3 4 5 6 7 | function getParameterByName(name, url) { if (!url) url = window.location.href; name = name.replace(/[\[\]]/g, "\\$&"); var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"), results = regex.exec(url); return results[2]; } | cs |
위 함수를 이용하면, 위에 예로 설명한 url에서 각각의 값들을 가져올 수 있습니다.
함수 설명은 다음과 같습니다.
먼저, 함수 인자로 파라미터의 name과 url을 받습니다.
이때, url을 받지 않아도 되는 데, url을 입력하지 않을 경우에 아래 함수에서 현재의 url을 가져오는 코드입니다.
1 | if (!url) url = window.location.href; | cs |
이제, url을 name에 따라 값을 가져올 수 있도록 가공해야겠죠.
그래서 아래와 같은 replace와 정규식을 이용하여 url을 변경합니다.
1 2 3 | name = name.replace(/[\[\]]/g, "\\$&"); var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"), results = regex.exec(url); | cs |
이후, results[2]로 값을 가져오면, name에 따른 값을 가져올 수 있습니다.
사용 방법은 다음과 같습니다.
기존 url뒤에 ?age=99&name=blankspace 라고 적습니다.
1 2 3 | var age = getParameterByName('age'); // "99" var name = getParameterByName('name'); // "blankspace" var blank = getParameterByName('blank'); // "" 해당하는 값이 없 | cs |
직접, html 코드에 적용해봤기 때문에 잘 될겁니다.
이상 포스팅을 마치겠습니다.
서로 이웃 추가는 항상 환영입니다. :)
'프로그래밍 > etc. (Language)' 카테고리의 다른 글
[GIT] git 추적하지 않는 파일 (untracked files) 제거 하는 방법 (1) | 2019.01.20 |
---|---|
[JavaScript] 티스토리 블로그에 자바스크립트 함수 호출하기 (7) | 2018.09.04 |
[GIT] git 로그 커밋 히스토리 tig으로 편하게 보자 (0) | 2018.06.21 |
[HTML] div 태그로 내용 숨기는 방법 (0) | 2018.05.25 |
[GIT] git reset 또는 여러 명령어 취소하는 방법 (git reflog) (0) | 2018.04.24 |
댓글