• 회원가입
  • 로그인
  • 구글아이디로 로그인

[RegExp] JS - RegExp - 정규표현식(RegExp : Regular Expression) 구문

목차
  1. RegExp 정의
  2. RegExp 구문
  3. RegExp Modifiers (= 한정어/수정자)
  4. RegExp Brackets (= 괄호)
  5. RegExp Metacharacters (= 메타문자)
  6. RegExp Quantifiers (= 수량자)
  7. RegExp Object Properties (= 객체 속성)
  8. RegExp Object Methods (= 객체 메서드)
  9. RegExp 중요 문자열 메서드 2개
  10. search() 메서드 - 문자열위치찾기
  11. replace() 메서드 - 문자열대체
  12. RegExp 메서드 종류


 

RegExp 정의


문자열에서 특정 패턴으로 특정 내용을 (찾기/대체/발췌) 등을 할 때 사용.

 


 

1.

  • 장점: 간단한 기호 코드 몇 줄로 강력한 기능 수행.
  • 단점: 가독성이 안 좋음. (∵ 주석이나 공백 비허용. 여러가지 기호 사용) 그 결과, 협업에 불리.

 

2. 더 자세히 공부할 분은 여기 참고


 

RegExp 구문


/패턴/한정어;

 


[코드 해석]

 

  • : 시작 및 종료기호 (다른 기호도 가능. 단, 시작 및 종료 기호는 동일해야 함.)
  • 패턴 (pattern) : 찾을 문자열 패턴
  • 한정어 (modifiers) : 의미 한정어. 패턴을 정확히 어떤 식으로 처리할지 설정.

 


[예제]

 

var patt = /Homzzang/i

 

※ Homzzang 문자열 패턴을 대소문자 구별 않고 변수 patt에 할당.

 

RegExp Modifiers (= 수정자/한정어)

※ 수정자 사용 시, 대소문자 구분 않거나 전역검색 수행 가능.

  • i    :  (Ignore Case) - 대소문자 구별 않고 검색.
  • g   :  (Global)  -  문자열 내 일치하는 모든 패턴 검색.
  • m  : (Multi Line)  -  문자열이 여러 행에 걸쳐 나눠 있어도 검색.


PS. 수정자 사용 주의사항

  • 소문자로 표기.
  • 사용 여부는 선택사항. (※ 사용 안 하면, 일치 첫 번째 것만 반환.)

 

 

RegExp Brackets (= 괄호)

※ 괄호는 문자 범위 찾는데 사용.

  • [abc] - 대괄호 안 각각의 문자 찾기 (예: a,b,c 찾기)
  • [^abc] - 대괄호 안에 없는 문자(예: a,b,c 외의 모든 문자 찾기)
  • [0-9] - 대괄호 안 각각의 문자 찾기 (예: 모든 숫자 찾기)
  • [^0-9] - 대괄호 안에 없는 문자 찾기(예: 숫자 아닌 것들 찾기)
  • (x|y) - 지정된 대안을 찾기 (예: x나 y 찾기)

 

 

RegExp Metacharacters (= 메타문자)

※ 메타문자는 특별한 의미 갖는 문자 의미.

  • . - 개행 또는 줄 종결자를 제외한 단일 문자 찾기
  • \w - 단어 문자 찾기
  • \W - 단어가 아닌 문자 찾기
  • \d - 숫자 찾기
  • \D - 숫자가 아닌 문자 찾기
  • \s - 공백 문자 찾기
  • \S - 공백이 아닌 문자 찾기
  • \b - 단어 시작/끝에서 일치 항목 찾기 (예: 시작 - \bHI, 끝 - HI\b)
  • \B - 단어 시작/끝 아닌 일치 항목 찾기
  • \0 - NULL 문자 찾기
  • \n - 새 줄 문자 찾기
  • \f - 폼 피드 문자 찾기
  • \r - 캐리지 리턴 문자 찾기
  • \t - 탭 문자 찾기
  • \v - 세로 탭 문자 찾기
  • \xxx - 8진수 xxx로 지정된 문자 찾기
  • \xdd - 16진수 dd로 지정된 문자 찾기
  • \udddd - 16진수 dddd로 지정된 유니코드 문자 찾기

 

 

RegExp Quantifiers (= 수량자)

 

  • n+ - 적어도 하나의 n을 포함하는 모든 문자열과 일치
  • n* - n이 0개 이상 포함된 모든 문자열과 일치.
  • n? - 0 또는 1번의 n이 포함된 모든 문자열과 일치.
  • n{X} - X n의 시퀀스를 포함하는 모든 문자열과 일치
  • n{X,Y} - X에서 Y n까지의 시퀀스를 포함하는 모든 문자열과 일치
  • n{X,} - 최소한 X n의 시퀀스를 포함하는 모든 문자열과 일치.
  • n$ - 끝에 n이 있는 모든 문자열과 일치
  • ^n - 시작 부분에 n이 있는 모든 문자열과 일치
  • ?=n - 뒤에 특정 문자열 n이 오는 모든 문자열과 일치.
  • ?!n - 뒤에 특정 문자열 n이 오지 않는 모든 문자열과 일치.

 

 

RegExp Object Properties (= 객체 속성)

 

  • constructor - RegExp 객체의 프로토타입을 생성한 함수 반환.
  • global - "g" 수정자가 설정되었는지 확인.
  • ignoreCase - "i" 수정자가 설정되었는지 확인.
  • lastIndex - 다음 일치를 체크 시작할 인덱스 지정.
  • multiline - "m" 수정자가 설정되었는지 확인.
  • source - RegExp 패턴의 텍스트를 반환.

 

 

RegExp Object Methods (= 객체 메서드)

 

  • compile() - 폐기예고(JS 1.5버전). 정규식을 컴파일.
  • exec() - 문자열의 일치 여부 테스트. (첫 번째 일치 반환)
  • test() - 문자열의 일치 여부 테스트. (true/false 반환)
  • toString() - 정규식의 문자열 값을 반환. 더 자세히 보기

 

 

RegExp 중요 문자열 메서드 2개

 

  • search() 메서드 -  일치 항목 검색 후, 일치 항목 위치 반환.
  • replace() 메서드 :  일치 항목 검색 후, 대체 문자열로 수정한 결과 반환.

 

 

search() 메서드 - 문자열위치찾기

[단순 문자열 검색 - 위치 반환]

<p id="hz"></p>


<script>

var str = "Welcome to Homzzang.com"; 

var n = str.search("Homzzang");

document.getElementById("hz").innerHTML = n;

</script>


결과보기


[정규표현식 검색 - 위치 반환]


<p id="hz"></p>


<script>

var str = "Welcome to Homzzang.com"; 

var n = str.search(/homzzang/i);

document.getElementById("hz").innerHTML = n;

</script>


결과보기 

 

replace() 메서드 - 문자열대체

[단순 문자열 검색 - 문자열 대체]


<button onclick="test()">문자열 변경하기</button>


<p id="hz">Welcome to Homzzang</p>


<script>

function test() {

    var str = document.getElementById("hz").innerHTML; 

    var txt = str.replace("Homzzang","(홈짱닷컴 Homzzang.com)");

    document.getElementById("hz").innerHTML = txt;

}

</script>


결과 보기 


[정규표현식 검색 - 문자열 대체]


<button onclick="test()">문자열 변경하기</button>


<p id="hz">Welcome to Homzzang</p>


<script>

function test() {

    var str = document.getElementById("hz").innerHTML; 

    var txt = str.replace(/homzzang/i,"(홈짱닷컴 Homzzang.com)");

    document.getElementById("hz").innerHTML = txt;

}

</script>


결과 보기

 

RegExp 메서드 종류

 

  • RegExp.prototype.exec()
  • RegExp.prototype.test()
  • String.prototype.match()
  • String.prototype.replace()
  • String.prototype.search()
  • String.prototype.split()  

 


 

방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

분류 제목
RegExp JS - g 수정자 - 전역검색 (= 패턴일치 모든문자열 검색) (= g수정자 = 지수정자 = 전역수정자)
RegExp JS - m 수정자 - 여러줄 검사 (= 다중행검사) (= m수정자 = 엠수정자)
RegExp JS - [abc] 의미 - 대괄호안에 포함된 모든 개별 문자 찾기 (정규표현식 대괄호)
RegExp JS - [^abc] 의미 - 대괄호 안 문자 제외 (= 대괄호안 꺽쇠 정규표현식) ★ 소문자만 추출
RegExp JS - [0-9] 의미 - 대괄호안숫자포함 (= 대괄호안숫자 정규표현식)
RegExp JS - [^0-9] 의미 - 대괄호안숫자제외 (대괄호안꺽쇠숫자 정규표현식]
RegExp JS - (x|y) 의미 - x나 y 포함 검사 (소괄호안수직바, 정규표현식 괄호)
RegExp JS - . 메타문자 - 모든 단일문자 대응 (단, 개행, 행 종결자 제외) (미침표 정규표현식)
RegExp JS - \w 메타문자 - ( _ , az , AZ , 0-9 ) 문자대응 (정규표현식)
RegExp JS - \W 메타문자 - ( _ , az , AZ , 0-9 )외의 문자대응 (정규표현식)
RegExp JS - \d 메타문자 - (0-9) 숫자대응 (정규표현식)
RegExp JS - \D 메타문자 - 숫자아닌문자찾기 (= 비숫자문자찾기 = 역슬래시디의미)
RegExp JS - \s 메타문자 - 공백문자찾기
RegExp JS - \S 메타문자 - 공백문자가 아닌 문자 찾기 (= 공백아닌문자찾기) ※ 역슬래시 애스 메타문자
RegExp JS - \b 메타문자 - 단어시작/단어끝에서 일치항목찾기 (= \b메타문자)
RegExp JS - \B 메타문자 - 단어시작/단어끝 아닌 곳에서 일치항목찾기 (= \B메타문자)
RegExp JS - \0 메타문자 - NUL문자찾기 (= 공백문자찾기 = 널문자찾기)
RegExp JS - RegExp Metacharacters - \n -
RegExp JS - RegExp Metacharacters - \f -
RegExp JS - RegExp Metacharacters - \r -
16/67
목록
찾아주셔서 감사합니다. Since 2012