JavaScript에서 부분 문자열 찾기와 추출. indexOf()와 substring()을 결합하여 특정 문자열을 찾고 추출하는 방법.

작성일 : 2024-03-23

JavaScript에서 부분 문자열 찾기와 추출: indexOf()와 substring()을 결합하여 특정 문자열을 찾고 추출하는 방법

JavaScript는 문자열을 조작하고 처리하는 데 유용한 다양한 메서드를 제공합니다. 특히 부분 문자열을 찾고 추출하는 작업은 웹 개발에서 자주 필요합니다. 이 글에서는 indexOf()와 substring() 메서드를 결합하여 특정 문자열을 찾고 추출하는 방법을 다룹니다. indexOf() 메서드는 문자열 내에서 특정 텍스트를 검색할 때 유용하며, substring() 메서드는 문자열의 일부를 추출하는 데 사용됩니다. 두 메서드를 함께 사용하여 강력한 문자열 처리 기능을 구현할 수 있습니다.

indexOf() 메서드

indexOf() 메서드는 문자열 내에서 특정 텍스트를 찾아 그 위치를 반환합니다. 찾고자 하는 텍스트가 존재하지 않으면 -1을 반환합니다.

기본 문법


javascript
string.indexOf(searchValue, fromIndex);

searchValue: 검색할 문자열.
fromIndex (선택 사항): 검색을 시작할 위치. 기본값은 0입니다.

사용 예제


javascript
let str = "Hello, world!";
let position = str.indexOf("world");
console.log(position); // 7

position = str.indexOf("world", 8);
console.log(position); // -1 (검색 시작 위치 이후에 "world"가 존재하지 않음)

substring() 메서드

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

기본 문법


javascript
string.substring(indexStart, indexEnd);

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

사용 예제


javascript
let str = "Hello, world!";
let result = str.substring(7, 12);
console.log(result); // "world"

indexOf()와 substring()을 결합하여 문자열 찾기와 추출하기

이제 indexOf()와 substring()을 결합하여 문자열 내에서 특정 부분 문자열을 찾고 추출하는 방법을 살펴보겠습니다.

예제: 문자열에서 도메인 추출하기

다음은 URL에서 도메인 부분을 추출하는 예제입니다.


javascript
let url = "https://www.example.com/path?query=123";
let start = url.indexOf("//") + 2; // 2를 더해 "://"를 건너뜁니다.
let end = url.indexOf("/", start);
let domain = url.substring(start, end);
console.log(domain); // "www.example.com"

이 예제에서 indexOf("//")를 사용하여 //의 위치를 찾고, 도메인의 시작 위치를 계산합니다. 이후 indexOf("/", start)를 사용하여 도메인의 끝 위치를 찾고, substring()을 사용하여 도메인을 추출합니다.

예제: 텍스트에서 특정 단어 추출하기

사용자 입력에서 특정 단어를 추출하는 것도 자주 필요한 작업입니다.


javascript
let text = "Please find the keyword in this sentence.";
let keyword = "keyword";
let start = text.indexOf(keyword);

if (start !== -1) {
  let end = start + keyword.length;
  let extractedKeyword = text.substring(start, end);
  console.log(extractedKeyword); // "keyword"
} else {
  console.log("Keyword not found.");
}

이 예제에서는 indexOf(keyword)를 사용하여 키워드의 시작 위치를 찾고, substring()을 사용하여 키워드를 추출합니다. start가 -1이 아닌 경우에만 추출을 수행하여 키워드가 존재하는지 확인합니다.

예제: HTML 태그 추출하기

HTML 문자열에서 특정 태그를 추출하는 예제도 살펴보겠습니다.


javascript
let html = "<div>Hello, <span>world</span>!</div>";
let tag = "span";
let startTag = <${tag}>;
let endTag = </${tag}>;

let start = html.indexOf(startTag);
let end = html.indexOf(endTag, start);

if (start !== -1 && end !== -1) {
  start += startTag.length; // 태그 길이를 더해 실제 내용의 시작 위치를 계산합니다.
  let content = html.substring(start, end);
  console.log(content); // "world"
} else {
  console.log(${tag} tag not found.);
}

이 예제에서는 indexOf(startTag)와 indexOf(endTag, start)를 사용하여 시작 태그와 종료 태그의 위치를 찾고, substring()을 사용하여 태그 사이의 내용을 추출합니다.

다양한 사용 사례

indexOf()와 substring()을 결합하여 다양한 문자열 처리 작업을 수행할 수 있습니다. 몇 가지 추가적인 사용 사례를 살펴보겠습니다.

이메일 주소에서 도메인 추출

이메일 주소에서 도메인 부분을 추출하는 예제입니다.


javascript
let email = "user@example.com";
let atIndex = email.indexOf("@");

if (atIndex !== -1) {
  let domain = email.substring(atIndex + 1);
  console.log(domain); // "example.com"
} else {
  console.log("Invalid email address.");
}

이 예제에서는 indexOf("@")를 사용하여 @의 위치를 찾고, substring(atIndex + 1)을 사용하여 도메인을 추출합니다.

텍스트에서 첫 번째 문장 추출

텍스트에서 첫 번째 문장을 추출하는 예제입니다.


javascript
let paragraph = "This is the first sentence. Here is the second sentence.";
let periodIndex = paragraph.indexOf(".");

if (periodIndex !== -1) {
  let firstSentence = paragraph.substring(0, periodIndex + 1);
  console.log(firstSentence); // "This is the first sentence."
} else {
  console.log("No sentence found.");
}

이 예제에서는 indexOf(".")를 사용하여 첫 번째 마침표의 위치를 찾고, substring(0, periodIndex + 1)을 사용하여 첫 번째 문장을 추출합니다.

결론

JavaScript에서 부분 문자열을 찾고 추출하는 작업은 indexOf()와 substring() 메서드를 결합하여 쉽게 수행할 수 있습니다. indexOf() 메서드는 문자열 내에서 특정 텍스트를 검색하는 데 사용되며, substring() 메서드는 문자열의 일부를 추출하는 데 사용됩니다. 이 두 메서드를 함께 사용하면 문자열 처리 작업을 효율적으로 수행할 수 있습니다.

다양한 예제를 통해 indexOf()와 substring() 메서드의 사용 방법과 실전 활용 사례를 살펴보았습니다. 이러한 기법을 활용하여 웹 개발 등 다양한 분야에서 문자열 처리 작업을 더욱 능숙하게 다룰 수 있게 되기를 바랍니다.