정규표현식을 통해 하는 작업
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 사이에 공백이 있다면 만족
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 |