프론트엔드 개발/JavaScript

정규표현식 굉장히 잔뜩 기초만 쉽게

하이고니 2023. 1. 6. 13:07

정규표현식을 통해 하는 작업

1. 패턴에 해당되는 정보 추출

 

   - 문자열 중에서 url만 추출

   - 문자열 중에서 이메일만 추출

 

2. 정보 포함 테스트

 

   - 문자열 중에 'a' 가 있는가?

 

3. 정보를 다른 것으로 치환

 

let pattern = /a/
pattern.exec('abcde')	// ["a"]: 출력은 배열

// pattern 은 'a' 를 찾고 싶다는 의지
// .exec 는 정규표현식 실행 메서드('abcde' 라는 정보를 갖고 있는 정규표현식)

let pattern = /a./		// .은 '하나의 문자' . 앞에는 반드시 a가 있어야 함.
pattern.exec('abcde') 	// ["ab"]



let pattern = /a/
pattern.exec('bcdef') 	// null

// .exec는 대상을 인자로 받아 배열을 리턴하는 메서드. 추출

pattern.test('abcde')	// true
pattern.test('bcde')	// false

// .test는 boolean 값을 리턴. 있으면 true, 없으면 false. 테스트

 

문자열 메서드 실행

 

문자열 객체의 몇몇 메소드는 정규표현식을 사용할 수 있다.

let pattern = /a/

let str = 'abcdef'
str.match(pattern)	// ["a"]

let.str = 'bcdef'
str.match(pattern)	// null

let.str = 'abcdef'
str.replace(pattern, 'A')	// "Abcdef"

 

옵션

정규표현식 패턴을 만들 때 옵션을 설정할 수 있다. 옵션에 따라서 검출되는 데이터가 달라진다.

 

i를 붙이면 대소문자를 구분하지 않는다.

let xi = /a/
"Abcde".match(xi)	// null

let oi = /a/i
"Abcde".match(oi)	// ["A"]

 

g를 붙이면 검색된 모든 결과를 리턴한다.

let xg = /a/
"abcdea".match(xg)	// ["a"]

let og = /a/g
"abcdea".match(og)	// ["a", "a"]

 

같이 사용할 수도 있다.

let ig = /a/ig
"AabcdAa".match(ig)		// ["A", "a", "A" ,"a"]

 

캡처

(\w+)\s(\w+)	// 괄호는 Group
		// \w 는 A-Za-z0-9
                // + 는 수량자: 앞에 있는 문자가 하나 이상인 경우 패턴에 해당
                // "#" 은 Group에 해당되지 않음
                // "A", "AA" 다 해당됨
                // \s Group 사이에 공백이 있다면 만족

정규표현식 시각화 https://regexper.com/
Text를 입력했을 때, 위의 패턴에 해당하면 파란색 불이 들어온다. https://regexr.com/

let pattern = /(\w+)\s(\w+)/
let str = "coding everybody"
let result = str.replace(pattern, "$2, $1")		// $n: '패턴에서 n 번째 그룹'을 의미함 

result		// everybody, coding

// 이런 식으로 패턴을 미리 짜두고, 그 패턴에 해당하는 text에 대해 원하는 조작을 할 수 있음.

캡처: 그룹을 지정하고 지정된 그룹을 가져와서 사용하는 기능.

 

치환

let urlPattern = /\b(?:https?):\/\/[a-z0-9-+&@#\/%?=~_|!:,.;]*/gim;

let content = '생활코딩 : http://opentutorials.org/course/1 입니다. 
				네이버 : http://naver.com 입니다. ';
                
let result = content.replace(urlPattern, function(url){
    return '<a href="'+url+'">'+url+'</a>';
});

// content라는 스트링이 replace라는 메서드를 호출
// content라는 스트링에 urlPattern에 해당하는 놈이 있다면,
// 그 놈을 url이라는 인자로 function에 집어넣어 리턴되는 값으로 바꾼다.
// content에서 replace 메서드 사용한 이후의 값을 result 에 할당

console.log(result);

// 생활코딩 : <a href="http://opentutorials.org/course/1">http://opentutorials.org/course/1</a> 입니다. 
// 네이버 : <a href="http://naver.com">http://naver.com</a> 입니다.

 

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

JavaScript - call, apply, bind  (0) 2023.01.31
flat() 쓰지 않고 중첩 배열 평탄화  (0) 2023.01.28
정규표현식  (0) 2023.01.25
fetch axios  (0) 2023.01.23
javascript 24시간 형식 표시(HH:MM)  (0) 2023.01.10