[JavaScript] 정규표현식(Regex)

이예지·2023년 9월 15일

JavaScript 정규표현식

JavaScript

목록 보기

2/4

❓ 정규표현식이란

→ 특별한 패턴을 추출해내거나, 확인하거나, 찾아낸 것을 치환하는 도구

정규표현식은 JavaScript와 같은 언어라고 볼 수 있다. 다른 언어들에서도 정규표현식을 사용할 수 있도록 하는 기능을 제공하고 있다.

⚡️ 정규표현식의 표현

var pattern = /a/; // 정규표현식 리터럴
var pattern = new RegExp('a'); // 정규표현식 객체 생성자

⚡️ 패턴 추출하기(검색)

.exex() : 찾고자 하는 패턴이 있다면 해당 패턴배열을 리턴하는 함수

var pattern = /a/;
pattern.exec('abcde');
// ['a', index: 0, input: 'abcde', groups: undefined]

. : 아무 문자나 한문자를 뜻한다.

var pattern = /a./;
pattern.exec('abcde');
// ['ab', index: 0, input: 'abcde', groups: undefined]
pattern.exec('bcdef');
// null

⚡️ 패턴 검사하기

.test() : 찾고자 하는 패턴이 있다면 true, 없다면 false를 리턴하는 함수

var pattern = /a/;
pattern.test('bcdef');
// false
pattern.test('abcde');
// true

⚡️ 문자열에서 정규표현식 사용하기

문자열.match(패턴) : 문자열에서 패턴을 찾으면 해당 패턴배열을 리턴하고, 없다면 null을 리턴한다.

var pattern = /a/;

var str = 'abcde';

str.match(pattern);

//['a', index: 0, input: 'abcde', groups: undefined] 없으면 null

i : 대소문자를 구분하지 않는다.
g : 검색된 모든 결과를 리턴한다. (중복 포함)

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

var xi = /a/;
console.log("Abcde".match(xi)); // null
var oi = /a/i;
console.log("Abcde".match(oi)); // ["A"];

// g를 붙이면 검색된 모든 결과를 리턴한다.
var xg = /a/;
console.log("abcdea".match(xg));
var og = /a/g;
console.log("abcdea".match(og));

🌐 정규표현식 관련 사이트

💡 정규표현식을 시각화해주는 사이트 ➡️ https://regexper.com/

\w → A~Z, a~z, 0~9
+ → 하나이상
\s → 공백

💡 정규표현식 패턴에 해당되는지 확인해주는 사이트 ➡️ https://regexr.com/

⚡️ 캡처 ($의 사용)

그룹을 지정해서 사용하는 기능을 ‘캡처’라고 한다.

var pattern = /(\w+)\s(\w+)/;
var str = "coding everybody";
var result = str.replace(pattern, "$2, $1");
console.log(result);
// everybody, coding

💥 활용

본문 URL 을 링크 html 태그로 교체하는 코드

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);