시작전 세팅

  1. 프로젝트 전용 폴더 생성
  2. 터미널 npm init -y
  3. 서버를 열기위한 npm install parcel-bundler -D 설치
  4. 서버를 열기위한 package.json 에서 스크립트 부분dev 설정 참고
  5. 세팅다하면 npm run dev

정규표현식 테스트 사이트

https://regexr.com/

자바스크립트 정규식 생성

생성자 함수 방식

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


// 생성자
// gi : 대소문자 상관없이 찾는다
new RagExp('표현', '옵션')
new RagExp('[a-z]', 'gi')
const regexp = new RegExp('the','gi');
        

리터럴(Literal) 방식

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


/표현/옵션
/[a-z]/gi
const regexp = /the/gi;
        

메소드

종류 설명 문법
test() 일치 여부(Boolean) 반환 정규식.test(문자열)
match() 일치하는 문자열의 배열(Array) 반환 문자열.match(정규식)
replace() 일치하는 문자열을 대체하고 대체된 문자열(String) 반환 문자열.replace(정규식,대체문자)

const str = `
010-1234-5678
jjgodcom1@gmail.com
https://www.omdbapi.com/?apikey=7035c60c&s=frozen
The quick brown fox jumps over the lazy dog
abbcccdddd
`;

const regexp = /fox/gi;
console.log('test : ', regexp.test(str));
console.log('replace : ', str.replace(regexp, 'AAA'));
        

플래그(옵션)

종류 설명
g 모든 문자와 여러 줄 일치(global)
i 영어 대소문자를 구분 않고 일치(insensitive, ignore case)
m 여러 줄 일치(multi line)

// \. : 마침표만 검색 하겟다는 뜻
// \.$ : 끝나는곳에 마침표 찾기
console.log(str.match(/\.$/gi));
        

패턴(표현)

종류 설명
^ab 줄(Line) 시작에 있는 ab와 일치
ab$ 줄(Line) 끝에 있는 ab와 일치
. 임이의 한 문자와 일치
a|b a 또는 b와 일치
ab? b가 업거나 b와 일치
{3} 3개 연속 일치
{3,} 3개 이상 연속 일치
{3,5} 3개 이상 연속 일치
[abc] a 또는 b 또는 c
[a-z] a부터 z 사이의 문자 구간에 일치(영어 소문자)
[A-Z] A부터 Z 사이의 문자 구간에 일치(영어 대문자)
[0-9] 0부터 9 사이의 문자 구간에 일치(숫자)
[가-힣] 가부터 힣 사이의 문자 구간에 일치(한글)
\w 63개 문자(Word, 영문 대소문자 52개 + 숫자 10개 + _)에 일치
\b 63개 문자에 일치하는 경계(Boundary)
\d 숫자(Digit)에 일치
\s 공백(Space, Tab 등)에 일치

const str = `
010-1234-5678
jjgodcom1@gmail.com
https://www.omdbapi.com/?apikey=7035c60c&s=frozen
The quick brown fox jumps over the lazy dog.
abbcccdddd
http://lo
동해물과_백두산이 마르고 닳도록
`;
const h = `   the hello  world      !

`;

// 각줄에서 t로 시작하는거 찾기
str.match(/^t/gim) 

// 각줄에서 d로 끝나는거 찾기
str.match(/d$/gm) 

// h..p : h시작p로끝나는 단어 찾기
str.match(/h..p/g)

// fox|dog : fox또는dog 찾기
str.match(/fox|dog/g)

// https? : ?앞에s 가 있으니 s를 포함하거나 없는단어 찾기
str.match(/https?/g)

// d{2} : d가 2번 반복되는 구간 찾기
str.match(/d{2}/g)

// d{2} : d가 2개 이상 일치하는거 찾기
str.match(/d{2,}/g)

// d{2,} : d가 2개 이상 3개 이하 일치하는거 찾기
str.match(/d{2,3}/g)

// \w{2,3} : 숫자를 포함한 알파벳이 2번이상 3번이하 일치하는거 찾기
str.match(/\w{2,3}/g)

// [0-9]{1,} : 모든 숫자 한개 이상 찾기 
str.match(/[0-9]{1,}/g)

// [가-힣]{1,} : 모든 한글 한개 이상 찾기 
str.match(/[가-힣]{1,}/g)

// \w : _, 영문 대소문자, 숫자 검색
str.match(/\w/g)

// \bf\w{1,}\b: 소문자 f로 시작하는 영단어 찾기
// \b : 공백,특수문자 제외시킴
str.match(/\bf\w{1,}\b/g)

// \d : 숫자가 1개이상인거 찾기
str.match(/\d{1,}/g)

// h.replace(/\s/g, '') : 공백문자 찾아서 ''로 바꾸기
h.replace(/\s/g, '')

// /.{1,}(?=@) : @앞에 있는 아이디 찾기
str.match(/.{1,}(?=@)/g)

// /.{1,}(?=@) : @뒤에 있는 단어 찾기
str.match(/(?<=@).{1,}/g)
        

유용한거


// 모든 l을 bbb로 치환해라 
// 여기서 g는 글로벌을 뜻함
document.write("str.replace('l','bbb')) 정규식 g => "+str.replace(/l/g,'bbb'));
document.write("");
// 여기서 i는 대소문자 구분하지 않음을 뜻함
document.write("str.replace('l','bbb')) 정규식 gi => "+str.replace(/l/gi,'bbb'));

// 영문자와 숫자는 '' 로 replace 후 길이가 0 이면 OK
// 아니면 영문자와 숫자가 아닌값이 있다는 의미
id.replace(/[a-z.0-9]/gi,'').length > 0 

// ** Password
// => 길이(4이상), 숫자와 특수문자 반드시포함
// => 특수문자 : HTML 특수문자 리스트표 참고 (http://kor.pe.kr/util/4/charmap2.htm)
password.replace(/[!-*]/gi,'').length >= pLength 
alert(' Password는 특수문자를 반드시 1개 이상 포함해야 됩니다 ~~');
password.replace(/[0-9.!-*]/gi,'').length > 0 
alert(' Password는 숫자와 특수문자로만 입력하세요 ~~');

//한글과 영문만 허용 
name.replace(/[a-z.가-힇]/gi,'').length > 0 
alert(' Name은 한글과 영문으로만 입력하세요 ~~');