URL 파라미터 가져오기

JavaScript로 URL 파라미터를 가져온 후, 화면에 띄워 봅시다!

1. 화면 구성하기

우선 먼저, html파일을 생성한 후, body태그 안에 다음과 같이 작성해 줍시다.

getUrlParameter.html

<div id="name"></div>
<div id="age"></div>

2. 변수 지정

그 다음 현재 URL을 불러오기 위해, 다음과 같이 입력해 줍시다.

또한, obj라는 배열도 생성해 주세요!

const obj = {}; // 파라미터 내용이 들어갈 변수
const url = location.href; // 현재 URL

3. URL 파라미터 불러오기

다음과 같이 입력하여, URL 파라미터를 불러오는 함수를 만들어 줍시다.

paramObject(url)
function paramObject(url) {
    const param = url.split('?')[1]; // url을 ?로 나누어 두 번째 부분(쿼리 부분)을 가져옴)

	// 파라미터가 없는 경우, 빈 객체 반환
    if (!param) {
        return {};
    }
    const searchArr = param.split('&'); // &로 구분하여, 쿼리 파라미터를 배열로 만듦
    searchArr.forEach(v => {
        const index = v.indexOf('='); // index는 =로 구분
        if (index !== -1) {
            const name = v.substring(0, index); // index 부분이 오기 전은 name으로 저장
            const val = v.substring(index + 1, v.length); // index 부분부터 끝까지는 value로 저장
            try {
                obj[name] = JSON.parse(val);
            } catch (error) {
                obj[name] = val;
            }
        }
    })
    return obj;
}

4. 데이터 주입

그럼 이제, obj 배열의 값들을 div 태그 안의 내용에 넣어줍니다.

console.log(obj);
const userName = obj.user_name;
const userAge = obj.user_age;
document.getElementById('name').innerHTML = `사용자 이름: ${userName}`;
document.getElementById('age').innerHTML = `사용자 나이: ${userAge}`;

5. 결과

결과를 확인해보면, url을 http://localhost:5500/getUrlParameter.html?user_name=Kim&user_age=25라고 입력하고 보면, 사용자 이름과 나이가 제대로 들어간 것을 확인할 수 있어요.

6. 정리하며

지금까지 URL 파라미터를 가져오는 방법에 대해 알아보았습니다.

전체 코드

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="name"></div>
    <div id="age"></div>
    <script>
        const obj = {};
        url = location.href;
        paramObject(url);
        function paramObject(url) {
            const param = url.split('?')[1];

            if (!param) {
                return {};
            }
            const searchArr = param.split('&');
            searchArr.forEach(v => {
                const index = v.indexOf('=');
                if (index !== -1) {
                    const name = v.substring(0, index);
                    const val = v.substring(index + 1, v.length);
                    try {
                        obj[name] = JSON.parse(val);
                    } catch (error) {
                        obj[name] = val;
                    }
                }
            })
            return obj;
        }
        console.log(obj);
        const userName = obj.user_name;
        const userAge = obj.user_age;
        document.getElementById('name').innerHTML = `사용자 이름: ${userName}`;
        document.getElementById('age').innerHTML = `사용자 나이: ${userAge}`;
    </script>
</body>

</html>

'Front-End Study > JavaScript' 카테고리의 다른 글

함수 선언문(Function Declaration)과 함수 표현식(Function Expression) (1)	2024.10.22
구조 분해 할당(Destructuring assignment) (0)	2024.10.18
엑셀 다운로드 기능 구현하기 (1)	2024.10.07
즉시 실행 함수(IIFE) (0)	2024.09.19
D3 (0)	2024.08.14