[JS] 자바스크립트 언어 기본 - 섹션 12 JavaScript와 정규 표현식

황은하·2021년 11월 11일
0

JS

목록 보기
14/19

OT

정규표현식(regular expression)

문자열에서 특장한 문자를 찾아내는 도구


패턴 만들기

사용 방법

  1. 컴파일
    문자열 치환, 문자열 있나없나 검사
    우리가 필요한 대상을 찾는 것
    패턴(대상)을 찾는다.

  2. 실행
    찾은 대상에게 어떤 실행을 할건지.

패턴 만드는 방법

  1. 정규표현식 리터럴
var str = "a";

var pattern = /a/;	// a가 찾고자 하는 대상임
  1. 정규표현식 객체 생성자
var pattern = new RegExp('a');	// 찾고자 하는 패턴이 a임
// 위의 pattern과 같다.

RegExp 객체의 사용

  1. 작업의 대상 찾기
  2. 대상에게 어떤걸 할지 정하기
  3. 실행하기

정규표현식 메소드 실행

패턴에 해당하는 정보 추출
-> RegExp.exec()

확인하고자 하는 정보가 있는지 test
-> RegExp.test()

찾아낸 정보를 다른 정보로 치환
->

RegExp -> 정규표현식 객체

var pattern = /a/;	// a 찾을거야
pattern.exec('abcde');	// abcde에서. -> ["a"]

var pattern = /a./;	// a. 찾을거야
pattern.exec('abcde');	// abcde에서. -> ["ab"]

. -> 하나의 문자. 어떤 것이라도 된다.

var pattern = /a/;	// a 찾을거야
pattern.exec('bcdef'); // -> null   없어.

exec -> 배열로 리턴한다. 추출

var pattern = /a/;	// a 찾을거야
pattern.exec('abcde'); // -> true   있어.
pattern.exec('bcde'); // -> false   없어.

text -> 원하는 정보를 boolean으로 나타낸다.


String과 정규표현식

String.match()

var pattern = /a/;
var str = 'abcdef';
str.match(pattern);	// -> ["a"]

var str = 'bcde;
str.match(pattern); // -> null

String.replace() (치환)

var str = 'abcdef';
str.replace(pattern, 'A'); // -> Abcdef

옵션(i, g)

옵션에 따라서 검출되는 데이터가 달라진다.

i

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

var xi = /a/;
"Abcde".match(xi);	// -> null

var oi = /a/i;
"Abcde".match(oi);	// -> ["A"] -> 대문자 a도 찾아줌

g

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

var xg = /a/;
"abcdea".match(xg);	// -> ["a"]

var og = /a/g;
"abcdea".match(og);	// -> ["a", "a"] -> 두 번 등장

var ig = /a/ig;	// a 찾는데 대소문자 구분x, 모든 문자 찾기
"AabcdAa".match(ig); // ["A", "a", "A", "a"]

캡처

(\w+)\s(\w+)
() -> 그룹
\w -> 문자 (A~Z, a~z, 0~9)

  • -> 수량자. 앞의 문자가 1개 이상인 경우
    \s -> 스페이스. 공백
var pattern =/(\w+)\s(\w+)/;
var str = "coding everybody";
var result = str.replace(pattern, "$2, $1");
console.log(result);	// everybody, coding

패턴에 해당되는 값을 뒤로 치환한다.

$

$2 -> 두 번째 그룹
$1 -> 첫 번째 그룹

치환, 그룹 지정,

캡쳐
: 지정된 그룹을 가지고 사용하는 기능


치환

var urlPattern = /\b(?:https?):\/\/[a-z0-9-+&@#\/%?=~_|!:,.;]*/gim;
var content = '생활코딩 : http://opentutorials.org/course/1 입니다. 네이버 : http://naver.com 입니다. ';
var result = content.replace(urlPattern, function(url){
    return '<a href="'+url+'">'+url+'</a>';
});
console.log(result);
profile
차근차근 하나씩

0개의 댓글