문자열 내 특정 패턴을 찾아 그에 해당하는 정보를 파싱해야 할 때가 있습니다. 자바스크립트를 사용하여 특정패턴의 단어 다음에 오는 숫자들을 어떻게 효과적으로 추출할 수 있는지에 대해 알아보겠습니다.
문제의 시작
['age1', 'age2YT', 'age5', 'age3rt'] 처럼 age로 반복은 전체적으로 숫자뒤에 붙는 것도 있고 안붙는 것도 있는 배열이 있습니다.
여기서 해결하고 싶은건 문자열 배열 내에서 'age'라는 단어 다음에 오는 숫자가 있는 문자들만 카운팅 하고 그외에는 카운팅 하지 않는것이 목표였습니다.
또 다른 목표는 'age' 단어가 들어가있는 문자열 중 가장 큰 숫자를 찾는것이었습니다.
정규 표현식을 이용한 해결 방법
이 문제를 해결하기 위해 자바스크립트에서 정규표현식을 사용했습니다.
정규표현식은 문자열 내에서 특정 패턴을 찾고, 그룹화하며, 조작하는 데 매우 편리하게 만들 수 있답니다.
정규 표현식 작성
두가지의 정규식을 사용했습니다.
"/age(\d+)/;"와 "/^age\d+$/;"라는 정규 표현식을 사용합니다.
여기서 ^는 문자열의 시작을, \d+는 하나 이상의 숫자를 의미하며, ()는 해당 숫자를 그룹으로 묶어 추출하기 위함이고 $는 문자열의 끝을 나타냅니다.
따라서 이 패턴은 문자열이 'age'로 시작하고 숫자로 끝나야 일치한다는 것을 의미합니다.
자바스크립트 코드 예시
'age' 뒤에 숫자만 오는 문자열 갯수 세기
'age' 뒤에 숫자만 있는 경우의 갯수를 세기 위해서는 정규 표현식을 조금 더 구체화하여 'age' 다음에 숫자가 오고 그 뒤에 문자가 오지 않는 경우만 카운트하는 로직을 구현해야 합니다.
이러한 조건을 만족하는 정규 표현식은 /^age\d+$/가 될 것입니다.
여기서 ^는 문자열의 시작을, $는 문자열의 끝을 나타냅니다.
따라서 이 패턴은 문자열이 'age'로 시작하고 숫자로 끝나야 일치한다는 것을 의미합니다.
다음은 이 조건에 맞는 문자열의 개수를 세고, 결과를 HTML의 요소에 표시하는 예제 코드입니다:
<!DOCTYPE html>
<html>
<body>
<div id="result1"></div>
<script>
// 예시 데이터
let data = ['age1', 'age2', 'age3', 'age7', 'age5', 'age1rt', 'age2rt', 'age3rt', 'age4rt'];
// 'age' 다음에 숫자만 있는 경우를 찾는 정규 표현식 패턴
let pattern = /^age\d+$/;
// 'age'로 시작하는 문자열의 개수를 셀 변수
let count = 0;
data.forEach(item => {
if (pattern.test(item)) {
count++;
}
});
// 결과를 HTML 요소에 표시
document.getElementById("result1").innerText = "'age'로 시작하는 문자열의 개수: " + count;
</script>
</body>
</html>매치되는 경우에만 카운트를 증가시켜, 최종적으로 'age'로 시작하는 문자열의 총 개수를 출력합니다.
'age' 다음에 숫자를 추출해서 가장 큰 숫자 찾기
여기서 사용하는 정규 표현식은 /^age\(d+)/가 될 것입니다.
문자열 배열을 순회하면서 정규 표현식에 일치하는 부분을 찾고, 해당 숫자를 추출합니다.
추출된 숫자들 중에서 Math.max 함수를 이용해 최대값을 찾습니다.
<!DOCTYPE html>
<html>
<body>
<div id="result2"></div>
<script>
// 예시 데이터
let data = ['age1', 'age2', 'age3', 'age7', 'age5', 'age1rt', 'age2rt', 'age3rt', 'age4rt'];
// 'age' 다음에 숫자가 있는 경우를 찾는 정규 표현식 패턴
let pattern2 = /age(\d+)/;
let extractedNumbers = [];
data.forEach(item => {
let match = item.match(pattern2);
if (match) {
extractedNumbers.push(parseInt(match[1], 10));
}
});
let maxNumber = Math.max(...extractedNumbers);
console.log("가장 큰 숫자:", maxNumber);
// 결과를 HTML 요소에 표시
document.getElementById("result2").innerText = "'age'로 시작하는 가장 큰 숫자: " + maxNumber;
</script>
</body>
</html>
이 포스팅에서 사용한 소스
소스파일은 아래의 파일을 다운로드 받으시면 됩니다.
위 소스를 다운로드 하면 다음과 같은 실행결과가 나옵니다.
결론
이렇게 자바스크립트와 정규 표현식을 활용하면, 복잡할 수 있는 문자열 처리 작업을 간결하고 효율적으로 수행할 수 있습니다. 이 방법은 다양한 형태의 데이터 처리에 응용될 수 있어, 프로그래밍 능력을 한 단계 업그레이드 시킬 수 있는 좋은 연습이 될 것입니다.
'Language > JAVASCRIPT' 카테고리의 다른 글
| Javascript html 태그 div에서 onclick 속성을 추가하거나 삭제하는 방법 (0) | 2024.04.03 |
|---|---|
| 자바스크립트에서 랜덤 번호 생성하기 (0) | 2024.02.06 |
| [Javascript] 자바스크립트로 동적 HTML 요소 생성 방법 (0) | 2023.12.18 |
| 요즘 jQuery를 안 쓰는 이유 (0) | 2023.11.21 |
| 자바스크립트를 이용한 URL 쿼리스트링(Query String) 파싱 방법 (0) | 2023.11.10 |
