본문 바로가기
프론트엔드/JavaScript

정규 표현식

by step 1 2021. 6. 7.
반응형

정규표현식: 문자열을 검색하고 대체하는 데 사용 가능한 일종의 형식 언어 패턴,

간단한 문자 검색부터 이메일, 패스워드 검사 등의 복잡한 문자 일치 기능 등을 정규식 패턴으로 빠르게 수행 할 수 있다. 단, 정규식 패턴이 수행 내용과 매치가 잘 안 되어 가독성이 많이 떨어지기 때문에 입문자들이 어려워 하는 경우가 많다. 하지만 초반 개념만 잘 잡으면 금방 익숙해 질 수 있다.

정규표현식 역할

  • 문자 검색(search)
  • 문자 대체(replace)
  • 문자 추출(extract)

정규표현식 테스트 사이트

https://regex101.com/
https://regexr.com/
https://regexper.com/

 

regex101: build, test, and debug regex

Regular expression tester with syntax highlighting, explanation, cheat sheet for PHP/PCRE, Python, GO, JavaScript, Java. Features a regex quiz & library.

regex101.com

 

자바스크립트 정규식 생성

생성자 함수 방식

RegExp: 생성자 함수를 호출하여 사용할 수 있다.

const regexp1 = new RegExp("^abc")
// new RegExp(표현식)

const regexp2 = new RegExp("^abc", "gi")
// new RegExp(표현식, 플래그)

 

리터럴 방식

정규표현식은 / 로 감싸진 패턴을 리터럴로 사용한다.

const regexp1 = /^abc/;
// /표현식/

const regexp2 = /^abc/gi
// 표현식/플래그

 

예제

// 정규표현식
const str = `
010-1234-5678
hello@gmail.com;
https://www.omdbapi.com/?apikey=7035c60c&s=frozen
The quick brown fox jumps over the lazy dog.
abbcccdddd
`
// 대소문자 따져서 검색
// 생성자 방식
// const regexp = new RegExp('the', 'g')
// 리터럴 방식
const regexp = /the/g
console.log(str.match(regexp))

// 대소문자 안가리고 검색
// 생성자 방식
// const regexp2 = new RegExp('the', 'gi')
// 리터럴 방식
const regexp2 = /the/gi
console.log(str.match(regexp2))

반응형

'프론트엔드 > JavaScript' 카테고리의 다른 글

정규표현식3 - 플래그(옵션)  (0) 2021.06.07
정규표현식2 - 메소드  (0) 2021.06.07
JS 데이터 - OMDB API  (0) 2021.06.05
JS 데이터 - Storage  (0) 2021.06.04
JS 데이터 - JSON  (0) 2021.06.03