정규식 챗봇

JavaScript의 정규 표현식

정규 표현식(또는 정규식)은 문자열에서 특정 요소를 지정하고 조작하는 데 사용하는 문자들의 나열이에요. 그래서 다음과 같은 일을 할 수 있어요.

• 문자열에서 텍스트 검색하기
• 문자열의 부분 문자열 바꾸기
• 문자열에서 정보 추출하기

💡 JavaScript의 정규 표현식 문법은 이 언어의 ECMA-262 표준에 포함되어 있어요. 따라서 브라우저마다 다른 호환성을 걱정할 필요가 없어요.

정규 표현식을 만드는 방법

JavaScript에서 정규 표현식은 보통 /pattern/modifiers 형식으로 작성해요.

정규 표현식을 만드는 방법은 두 가지가 있어요.

1. 정규 표현식 리터럴:

const regex = /[a-z]/;

1. RegExp 생성자:

const regex = new RegExp('[a-z]');

두 경우 모두 JavaScript는 정규 표현식으로 객체를 만들어요. 기본적으로는 리터럴을 사용해 불변 패턴을 쓰는 것이 권장돼요.

RegExp 생성자는 정규 표현식이 바뀌거나 아직 무엇인지 모를 때(예를 들어 입력값처럼) 사용할 수 있어요.

🏴‍☠️ 플래그

정규 표현식에는 flags라고 하는 선택적인 초능력이 있어서 추가 기능을 사용할 수 있어요.

널리 사용되는 것들은 다음과 같아요.

• /g - 전체 검색
• /i - 대소문자 구분 없음
• /m - 여러 줄 검색

간단한 예시를 볼까요.

const re = /home/gi;
const str = 'Home, sweet home.';
const myArray = str.match(re);
console.log(myArray);

=> // ["Home", "home"]

g 문자는 문자열 안에서 가능한 모든 일치 항목을 찾아내요. 이 기능이 없으면 JavaScript는 첫 번째 Home 일치만 추출해요.

대소문자 구분 없음 플래그 /i는 패턴을 찾을 때 유연하게 만들어 줘요. 덕분에 찾는 대상이 UPPERCASE이든 lowercase이든 상관없어요.

RegExp 생성자를 사용할 때는 플래그를 추가하는 문법이 달라요.

let regex = /[a-z]/gi; // literal notation
let regex = new RegExp('[a-z]', 'gi'); // constructor with string pattern as first argument
let regex = new RegExp(/[a-z]/, 'gi'); // constructor with regular expression literal as first argument (Starting with ECMAScript 6)

자주 쓰이는 함수

정규 표현식을 JavaScript의 내장 함수와 함께 사용하면 문자열을 조작하고 데이터를 얻는 강력한 방법을 쓸 수 있어요.

정규 표현식과 함께 자주 사용되는 함수 몇 가지를 소개할게요.

Test

test() 메서드는 정규 표현식과 지정된 문자열 사이의 일치를 검색해요. true 또는 false를 반환해요.

const str = 'It is difficult to test if you have a virus';
const result = /virus$/.test(str);

console.log(result);

// => true

Match

match() 메서드를 사용하면 찾은 일치 항목의 유무에 따라 내용이 달라지는 유용한 배열을 얻어요.

이렇게 해서 어떤 문자열에서든 정보를 검색하고 추출할 수 있어요. 예를 들어 볼까요.

const funnyQuote =
  'If you see someone crying, ask if it is because of their haircut.';
const regex1 = /someone/;
const regex2 = /happy/;

funnyQuote.match(regex1);
// => ["someone", index: 11, input: "If you see someone crying, ask if it is because of their haircut.", groups: undefined]

funnyQuote.match(regex2);
// => null

전체 검색 플래그 /g가 있으면, 인덱스나 입력값 같은 유용한 정보와 함께 하나의 일치 항목만 얻는 대신, 메서드는 배열에 표시된 모든 발생 항목을 반환해요.

const funnyQuote =
  'If you see someone crying, ask if it is because of their haircut.';

const regex3 = /if/gi;

funnyQuote.match(regex3);
// => ["If", "if"];

Replace

JavaScript의 replace() 메서드를 사용하면 주어진 문자열에서 값을 찾아 원하는 새 값으로 바꿀 수 있어요.

string.replace(searchValue, newValue);

대체할 대상을 찾는 패턴은 하나의 문자열일 수도 있고, 정규 표현식일 수도 있어요.

let string = 'I like dogs!';
let result = string.replace('dogs', 'cats');

let string = 'I would love to travel to Japan';
let result = string.replace(/Japan/g, 'Hawaii');

게다가 각 값에 추가적인 변경을 하기 위해 대체 위치에 함수를 적용할 수 있어요.

let text = 'Say hello to the chatbot.';
let result = text.replace(/chatbot|hello/gi, function (word) {
  return word.toUpperCase();
});
// => "Say HELLO to the CHATBOT"

Split

JavaScript의 split() 메서드는 정규 표현식으로 문자열을 사용하고 조작하는 또 다른 방법을 보여줘요.

이때 패턴을 인식해서 주어진 문자열을 나누는 데 정규식을 사용해요. 예를 들어 str.split(/[,.\s]/) 같은 식이에요. 이 패턴이 separator로 쓰여요.

const str = 'hello,user.how are.you';

const result = str.split(/[,.\s]/);

console.log(result);
// => ['hello', 'user', 'how', 'are', 'you']