로고

자바스크립트에서 URL 처리와 substring() 활용: URL에서 특정 부분을 추출하거나 수정하는 방법

작성일 :

자바스크립트에서 URL 처리와 substring() 활용: URL에서 특정 부분을 추출하거나 수정하는 방법

웹 개발에서 URL 처리 작업은 매우 일반적이고 중요합니다. URL을 구성하는 요소들을 추출하거나 수정하는 작업은 사용자 경험을 향상시키고 데이터 처리를 효율적으로 만드는 데 필수적입니다. JavaScript의 substring() 메서드는 이러한 URL 처리 작업을 수행하는 데 매우 유용한 도구입니다. 이번 글에서는 URL에서 특정 부분을 추출하거나 수정하는 방법과 함께 substring() 메서드를 활용하는 다양한 기법을 살펴보겠습니다.

URL의 구성 요소

URL은 일반적으로 다음과 같은 구성 요소로 이루어져 있습니다:

  • 프로토콜: http, https 등
  • 도메인: 🔗 www.example.com 등
  • 포트: 80, 443 등
  • 경로: /path/to/resource
  • 쿼리 문자열: ?key1=value1&key2=value2
  • 프래그먼트: #section1

각 구성 요소를 추출하거나 수정하기 위해 substring() 메서드를 효과적으로 사용할 수 있습니다.

기본 문법: substring()

substring() 메서드는 문자열의 일부를 추출하여 새로운 문자열을 반환합니다. 두 개의 매개변수를 사용하여 추출할 부분의 시작과 끝 인덱스를 지정합니다.

문법

javascript
string.substring(indexStart, indexEnd);
  • indexStart: 추출을 시작할 인덱스. 이 인덱스는 포함됩니다.
  • indexEnd (선택 사항): 추출을 끝낼 인덱스. 이 인덱스는 포함되지 않습니다. 지정하지 않으면 문자열의 끝까지 추출합니다.

프로토콜 추출

URL의 프로토콜은 :// 앞에 위치합니다. substring()과 indexOf()를 사용하여 프로토콜을 쉽게 추출할 수 있습니다.

예제: 프로토콜 추출

javascript
let url = "https://www.example.com/path?query=123";
let protocolEndIndex = url.indexOf("://");
let protocol = url.substring(0, protocolEndIndex);
console.log(protocol); // "https"

위 예제에서는 indexOf("://")를 사용하여 ://의 위치를 찾고, substring(0, protocolEndIndex)을 사용하여 프로토콜 부분을 추출합니다.

도메인 추출

프로토콜 뒤의 부분부터 시작하여 첫 번째 /까지가 도메인입니다. 이를 추출하기 위해 substring()을 사용할 수 있습니다.

예제: 도메인 추출

javascript
let url = "https://www.example.com/path?query=123";
let protocolEndIndex = url.indexOf("://") + 3;
let domainEndIndex = url.indexOf("/", protocolEndIndex);
if (domainEndIndex === -1) domainEndIndex = url.length;
let domain = url.substring(protocolEndIndex, domainEndIndex);
console.log(domain); // "www.example.com"

위 예제에서는 protocolEndIndex부터 첫 번째 /까지의 부분을 추출하여 도메인 부분을 얻습니다.

경로 추출

도메인 뒤의 부분부터 쿼리 문자열 또는 프래그먼트 전까지가 경로입니다.

예제: 경로 추출

javascript
let url = "https://www.example.com/path/to/resource?query=123#section1";
let protocolEndIndex = url.indexOf("://") + 3;
let domainEndIndex = url.indexOf("/", protocolEndIndex);
if (domainEndIndex === -1) domainEndIndex = url.length;
let pathEndIndex = url.indexOf("?", domainEndIndex);
if (pathEndIndex === -1) pathEndIndex = url.indexOf("#", domainEndIndex);
if (pathEndIndex === -1) pathEndIndex = url.length;
let path = url.substring(domainEndIndex, pathEndIndex);
console.log(path); // "/path/to/resource"

위 예제에서는 도메인 뒤의 부분부터 쿼리 문자열 또는 프래그먼트 전까지의 부분을 추출하여 경로를 얻습니다.

쿼리 문자열 추출

쿼리 문자열은 ? 다음부터 시작하여 # 전까지입니다. 이를 추출하기 위해 substring()을 사용할 수 있습니다.

예제: 쿼리 문자열 추출

javascript
let url = "https://www.example.com/path?query=123&key=value#section1";
let queryStartIndex = url.indexOf("?");
if (queryStartIndex !== -1) {
  let queryEndIndex = url.indexOf("#", queryStartIndex);
  if (queryEndIndex === -1) queryEndIndex = url.length;
  let queryString = url.substring(queryStartIndex + 1, queryEndIndex);
  console.log(queryString); // "query=123&key=value"
}

위 예제에서는 ? 다음부터 # 전까지의 부분을 추출하여 쿼리 문자열을 얻습니다.

프래그먼트 추출

프래그먼트는 # 다음부터 URL의 끝까지입니다. 이를 추출하기 위해 substring()을 사용할 수 있습니다.

예제: 프래그먼트 추출

javascript
let url = "https://www.example.com/path?query=123#section1";
let fragmentStartIndex = url.indexOf("#");
if (fragmentStartIndex !== -1) {
  let fragment = url.substring(fragmentStartIndex + 1);
  console.log(fragment); // "section1"
}

위 예제에서는 # 다음부터 URL의 끝까지의 부분을 추출하여 프래그먼트를 얻습니다.

URL 수정

substring() 메서드를 사용하여 URL의 특정 부분을 수정할 수도 있습니다.

예제: 쿼리 문자열 수정

쿼리 문자열의 특정 값을 수정하는 예제입니다.

javascript
let url = "https://www.example.com/path?query=123&key=value#section1";
let queryStartIndex = url.indexOf("?");
if (queryStartIndex !== -1) {
  let queryEndIndex = url.indexOf("#", queryStartIndex);
  if (queryEndIndex === -1) queryEndIndex = url.length;
  let queryString = url.substring(queryStartIndex + 1, queryEndIndex);
  let newQueryString = queryString.replace("value", "newValue");
  let newUrl =
    url.substring(0, queryStartIndex + 1) +
    newQueryString +
    url.substring(queryEndIndex);
  console.log(newUrl); // "https://www.example.com/path?query=123&key=newValue#section1"
}

위 예제에서는 기존 쿼리 문자열의 값을 새로운 값으로 변경하고, 수정된 URL을 생성합니다.

URL에서 특정 부분 제거

substring() 메서드를 사용하여 URL의 특정 부분을 제거할 수도 있습니다.

예제: 쿼리 문자열 제거

쿼리 문자열을 제거하는 예제입니다.

javascript
let url = "https://www.example.com/path?query=123&key=value#section1";
let queryStartIndex = url.indexOf("?");
if (queryStartIndex !== -1) {
  let queryEndIndex = url.indexOf("#", queryStartIndex);
  if (queryEndIndex === -1) queryEndIndex = url.length;
  let newUrl = url.substring(0, queryStartIndex) + url.substring(queryEndIndex);
  console.log(newUrl); // "https://www.example.com/path#section1"
}

위 예제에서는 쿼리 문자열을 제거하고 수정된 URL을 생성합니다.

결론

JavaScript에서 URL 처리 작업은 substring() 메서드를 통해 효과적으로 수행할 수 있습니다. 이 글에서는 URL의 다양한 구성 요소를 추출하고 수정하는 방법을 다루었습니다. 프로토콜, 도메인, 경로, 쿼리 문자열, 프래그먼트를 추출하는 예제와, 쿼리 문자열을 수정하거나 제거하는 예제를 통해 substring() 메서드의 강력한 기능을 확인할 수 있었습니다.

이러한 기법들을 잘 이해하고 활용하면, 웹 개발과 데이터 처리에서 더욱 효율적이고 강력한 URL 처리 작업을 수행할 수 있을 것입니다. JavaScript의 substring() 메서드를 통해 다양한 URL 처리 작업을 능숙하게 다루어 보세요.