생활코딩 자바스크립트 기본 - 정규표현식

본 게시글은 인프런 강의 "생활코딩 - 자바스크립트(JavaScript) 기본"를 보고 공부한 내용을 정리하고 있습니다.

https://www.inflearn.com/course/%EC%A7%80%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%96%B8%EC%96%B4-%EA%B8%B0%EB%B3%B8/dashboard

[무료] 생활코딩 - 자바스크립트(JavaScript) 기본 - 인프런 | 강의

생활코딩의 자바스크립트 언어 기본 수업입니다. 기본 문법을 통한 자바스크립트 기본에 대해 배울 수 있습니다., - 강의 소개 | 인프런...

www.inflearn.com

정규표현식

정규표햔식은 문자열에서 특정한문자를 찾아내는 도구이다. 이 도구를 이용하면 수십줄이 필요한 작업을 한줄로 끝낼수 있다. 정규표현식을 완전히 공부하는 것은 하나의 언어를 공부하는 것과 비슷한 정도의 공부가 필요하다. 그러니 여기서는 자바스크립트에서 정규표현을 어떻게 사용하는지 초점을 두었다.

정규표현식 생성 리터럴

var pattern = /a/;	//a라는 패턴을 찾는다

정규표현식 객체 생성자

var pattern = new RegExp('a');	//a라는 패턴을 찾는다

두가지 모두 같은 결과를 만들지만 각자 장단점이 있다.

정규표현식 메소드 실행

정규표현삭을 컴파일해서 객체를 만들었다면 이제 문자열에서 원하는 문자를 찾아내야한다.

추출 :원하는 정보를 찾아서 추출한다.
test : 찾아낸 정보를 확인하고 테스트 해본다.
치환 : 찾아낸 정보를 다른 정보로 치환한다.

RegExp.exec()

exec는 문자열에 패턴 값이 존재하면 패턴 출력하고, 없으면 null 을 출력한다.

존재하면 추출한다.

var pattern = new RegExp('a');  //정규표현식 생성 객체 생성자
document.write(pattern.exec('abcde'));

다음을 실행하면 a가 페이지가 나온다.

RegExp는 정규표현식 객체라는 뜻이다.

var pattern =/z/;   //정규표현식 생성 리터럴
document.write(pattern.exec('abcde'));

다음 문자열에는 z라는 문자가 존재하지 않기 때문에 null이 출력된다.

var pattern =/a./;   //정규표현식 생성 리터럴
document.write(pattern.exec('abcde'));

다음을 실행하면 ab가 나온다.

a뒤에 나와있는 ' . '은 하나의 문자라는 뜻이고, 이 자리에는 a뒤의 하나의 문자가 들어가야한다.

var pattern =/.a/;   //정규표현식 생성 리터럴
document.write(pattern.exec('abcde'));

다음은 a앞에 문자가 존재하지 않기 때문에 page에 null값이 나온다.

RegExp.test()

test는 문자열애 해당 패턴이 있는지 확인하고, 존재하면 true, 없으면 false를 boolean형태를 출력한다.

존재 유무를 테스트한다.

var pattern =/a/;   //정규표현식 생성 리터럴
document.write(pattern.test('abcd')+"<br>");
document.write(pattern.test('bcde')+"<br>");

a값이 존재하는 abcd는 true를, a가 존재하지 않는 bcde는 false를 출력한다.

문자열 메소드 실행

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

String.match()

RegExp.exec()와 비슷한다.

var pattern = /a/;
var str = 'abc';
document.write(str.match(pattern)+"<br>");

str문장이 실행된다(abc)

match(pattern)이 실행되면서 문자열(abc)에 패턴문자(a)가 있는지 확인하고, 있으면 출력한다.

document.write('abc'.match(pattern)+"<br>");

다음 코드도 같은 출력을 갖는다.

str = 'zxc'로 바꾸면 pattern 문자인 a가 없기때문에 null이 출력된다.

String.replace()

String.replace(pattern,'문자')꼴로 사용하면 문자열에 pattern문자가 있을 경우 '문자'로 변경된다.

document.write(str.replace(pattern,'z')+"<br>");

만약 문자열이 'xxx'처럼 pattern문자가 없는 경우 replace는 실행 되지 않고, 'xxx'가 실행 된다.

옵션

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

i

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

var xi = /a/;
document.write('ABCDE'.match(xi)+"<br>");

var oi = /a/i;
document.write('ABCDE'.match(oi)+"<br>");

변수 xi와 oi를 비교하자

'/a/'값은 일치하지만 oi변수의 경우 뒤에 'i'가 붙어 있다.

여기서 ' i '는 옵션에 해당한다.

첫문장 'ABCDE'.match(xi)의 경우 null이 출력되지만,

'ABCDE'.match(oi)의 경우 대문자 소문자의 구분이 없게 하는 ' i '가 있기 때문에 A가 출력이 된다.

g

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

var xg = /a/;
document.write('abcdea'.match(xg)+"<br>");

다음 코드를 실행하면, a 하나만 페이지에 출력 된다.

var og = /a/g;
document.write('abcdea'.match(og)+"<br>");

다음 변수og는 xg와 다르게 뒤에 ' g '가 있는 것을 알수 있다.

옵션' g '는 모든 결과 값을 리턴 하기 때문에 a, a로 리턴 된다.

ig

둘을 다음 처럼 혼합해서 사용할 수 있다.

var xig =/a/;
document.write('AaBcDea'.match(xig)+"<br>");

var oig =/a/ig;
document.write('AaBcDea'.match(oig)+"<br>");

결과 값은 A, a, a가 나온다.

캡쳐

괄호안의 패턴은 마치 변수처럼 재사용할 수 있다. 이 때 기호 $를 사용한다.

( \w+ ) \s ( \w+ )

() : 괄호는 정규표현식에서 그룹을 의미합니다.
\w : 문자를 의미합니다.
+ : 수량자이고, 하나 이상이라는 뜻이다.
\s : 스페이스로 공백이다.

var pattern =/(\w+)\s(\w+)/;
var str = "Hello world"
var result = str.replace(pattern,"$2, $1")
document.write(result);

다음은 world, Hello라는 결과를 갖는다.

\w+는 하나 이상의 문자를 갖는다.

(\w+)를 \s 즉, 띄어쓰기가 구분하고 있다.

문자열 str은 'Hello wolrd'인데 Hello와 world가 띄어쓰기로 구분되어 있다.

그래서 Hello는 $1, world 는 $2에 들어가게 되면서 다음과 같은 출력을 갖는다.

$1은 그룹 1번, $2는 그룹 2번을 말한다.

치환

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script text="text/javascript">
    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>';
    });
    document.write(result);
</script>
</body>
</html>

다음과 같이 문자열이었던 content에 url패턴을 갖는 문장이 보이면 a태그를 통해 하이퍼 링크 형식을 변경 시켰다.

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

생활코딩 자바스크립트 기본 - 함수지향 (값으로서의 함수와 콜백) (0)	2022.08.02
생활코딩 자바스크립트 기본 - 함수지향(유효범위) (0)	2022.08.02
생활코딩 자바스크립트 기본 - 모듈 (0)	2022.08.01
생활코딩 자바스크립트 기본 - 객체 (0)	2022.08.01
생활코딩 자바스크립트 기본 - 배열 (0)	2022.07.31