Javascript/GMA(2302~)

230530 자바스크립트 예제 - URL,URI 값 가져와서 출력하기 (location.search( ) / split( ) + 정규표현식 / filter( ) / decodeURIComponent( ) /

hyerin1201 2023. 5. 30. 17:28

html

 

<body>
<main class="large">
  <h1>URL에?id=(ID)&amp;name=(이름)&amp;age=(나이)를<br>추가해서 실행해 주세요.</h1>
  
  <table>
    <tr><th>ID</th><td class="id"></td></tr>
    <tr><th>name</th><td class="name"></td></tr>
    <tr><th>age</th><td class="age"></td></tr>
  </table>
</main>
</body>

 

Javascript

//URL + ? + URI
//URI 값을 찾아와서 화면에 출력하기

//URL 값 가져와(location.search) URI를 분리해(split("")) ID, name, age로 한번더 분리(split("")) 저장할 변수 선언 -> 정규표현식사용법 알기
//.filter 사용법
//forEach로 반복하여 값을 한번 더 쪼개고 저장할 변수 선언
// 쪼갠값을 kew와 value 값으로 따로 저장할 변수 선언및 할당 -> decodeURIComponent() 인코딩된 텍스트를 디코딩 시켜준다.
//출력될공간 정의

const hashes = {}; //쪼갠 값들이 매칭될 수 있게 설정해서 넣을수 있는 객체 타입 선언
const parameters = location.search.split(/&|\?/).filter((value) => { return value.includes("=") }); //& 와 ? 를 기준으로 나누고, 그 값에서 =을 포함한 값안 상수에 넣어라.
parameters.forEach((parameter) => {
  const parameterList = parameter.split("=");
  const key = parameterList[0];
  const value = decodeURIComponent(parameterList[1]); //디코딩메서드
  hashes[key] = value;
});

if(hashes["id"] !== null) {
  document.querySelector(".id").innerHTML = hashes["id"];
}
if(hashes["name"] !== null) {
  document.querySelector(".name").innerHTML = hashes["name"];
}
if(hashes["age"] !== null) {
  document.querySelector(".age").innerHTML = hashes["age"];
}