자바스크립트 정규식의 플래그는 문자열 검색 패턴이 어떻게 동작할지 설정한다. 대표적으로 i g m 이 있으며 개별로 설정할 수 있고, 전체로 설정할 수 있다. i 는 대소문자를 구분하지 않고 검색을 하며 g 는 전체 문자열을 검색하고 m 은 여러 줄을 검색할 수 있도록 한다.
자바스크립트 문자열 정규식 플래그
패턴의 동작을 결정한다
문자열을 다루기 위해 공부해보는 정규식이지만 간단한 문법구조임에도 난해하다.
여러가지 상황에 대해 개발자가 생각할 부분이지만 좀처럼 와닿지가 않는다.
쉬운 것부터 익혀보면 되겠지 뭐,
정규식은 문자열을 검색 패턴으로 만들고 어떤 동작으로 검색하는지를 결정한다.
이런 검색 패턴의 동작을 결정하는 것이 정규식의 플래그이다.
자바스크립트 정규식에 대한 내용은 이전에 다뤘던 내용을 참고해 본다.
자바스크립트 정규표현식 사용 Regular Expression 문자열의 패턴 찾기
자바스크립트에서 정규식을 사용하는 것은 특정 문자열을 찾고 검색하여 재가공을 하기 위함이다. 웹기술이 발전하며 데이터의 전송과 가공은 필수적이 되었다. replace() 메서드를 사용해 단순
lngnat.tistory.com
검색 패턴의 동작 플래그의 종류
정규식의 기본 문법 구성은 다음과 같으며 굉장히 단순하다.
/검색패턴/플래그검색패턴은 문자열을 어떻게 검색할지를 패턴화시킨 것이며, 플래그는 검색패턴을 어떤 동작으로 검색할지 결정하는 것이다.
가장 많이 사용되는 플래그는 2가지이기도 한데, i 와 g 이다. 이외도 많지만 여러 줄의 탐색을 하기 위해서 m 플래그를 사용한다.
합쳐서 igm 으로 플래그를 지정하면 전체 문자열에서 원하는 문자열을 찾을 수 있다.
솔직히 igm 만 사용해도 무식하게 다 찾아버린다.
아래는 자바스크립트 정규식에 사용되는 패턴의 종류와 의미를 보여준다.
- i
- 대소문자를 구분하지 않고 패턴을 검색한다. - g
- 패턴이 있는 모든 부분을 검색한다. - m
- 패턴이 여러 줄로 검색할 수 있도록 한다.
사용방법
먼저 플래그의 사용방법부터 보도록 하자. 위에서 정규식에 대한 기본문법을 언급했었는데 플래그 부분을 사용하면 된다.
아래는 이미 언급한 플래그를 지정한 형태를 보여준다.
/검색패턴/플래그
-> /검색패턴/igm기본문법에서 플래그를 지정한 모습을 보여준다. 위의 코드에서 플래그 부분은 igm 이 된다.
의미는 다음과 같다.
- igm
( m ) 여러 줄을 대상으로 검색하도록 하며
( i ) 대소문자를 구분하지 않고
( g ) 패턴이 있는 모든 부분을 검색한다.
전체 코드 및 결과
자바스크립트 정규식에서 플래그의 사용방법에 대해 코드로 만들어 본다.
아래의 코드에서 정규식 패턴은 문자열을 그대로 사용하였으며, 플래그 부분만 몇가지로 변형하여 사용하였다.
사용한 메서드는 정규식의 match() 메서드를 사용하였다.
참고로 match() 메서드는 패턴이 해당하는 부분이 있는지를 검색한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Regular Expression Flag</title>
</head>
<body>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready( function() { /* without resources */ });
$(window).on('load', function() { /* with resources */
fnRegExpFlag();
});
</script>
<script>
var fnRegExpFlag = () => {
var varTxt = "현대카드 현대자동차, 현대제철 현대홈쇼핑 현대로템, 다이렉트자동차보험 현대자동차 내비게이션 업그레이드 현대건설";
var varPattern = null;
var varRet = null;
//- 대소문자를 구분하지 않고 검색 패턴을 비교.
varPattern = /현대/i;
varRet = varTxt.match(varPattern);
console.log(`패턴 플래그 i`, varRet.length, varRet);
//- 일치하는 모든 부분을 선택하여 검색 패턴을 비교.
varPattern = /현대/g;
varRet = varTxt.match(varPattern);
console.log(`패턴 플래그 g`, varRet.length, varRet);
//- 여러 줄로 비교하도록 설정하여 검색 패턴을 비교.
varPattern = /현대/m;
varRet = varTxt.match(varPattern);
console.log(`패턴 플래그 m`, varRet.length, varRet);
//- 모든 상황
varPattern = /현대/igm;
varRet = varTxt.match(varPattern);
console.log(`패턴 플래그 igm`, varRet.length, varRet);
};
</script>
<style>
</style>
</html>아래는 결과화면이다.
정규식의 플래그를 각각 하나씩 적용했을 떄와 전체를 적용했을 떄의 결과를 보여준다.
match() 메서드를 사용하였기에 결과값은 배열로 확인할 수 있다.
'programming > javascript' 카테고리의 다른 글
| 자바스크립트 문자열 정규식 기본 문법 시작 사용 (0) | 2023.02.22 |
|---|---|
| 자바스크립트 정규표현식 사용 Regular Expression 문자열의 패턴 찾기 (0) | 2023.02.17 |
| 문자열 html 태그 동적 추가 방법 textarea to div 화면 표시 (0) | 2023.02.09 |
| 자바스크립트 document 객체의 innerHTML innerText 차이 (0) | 2023.02.03 |
| 자바스크립트 화살표 함수 사용법 3가지 인자값과 리턴값 (0) | 2023.01.28 |
댓글