정규 표현식과 String

정규 표현식

정규 표현식은 자바스크립트 뿐만 아니라 다양한 언어에서 보편적으로 사용되는 문자열을 표현하기 위한 형식 언어이다. /as/i 이런 형태로 /로 감싸는 형태로 나타낸다. 여기서 i 부분은 플래그로써 정규 표현식의 검색 방법을 설정하는 부분이다. 총 6개중 i, g, m이 주로 쓰이고 순서대로 대소문자 구별하지 않음, 모든 문자열을 전역 검색, 행변환이 일어나도 검색이다.

자바스크립트에서는 RegExp 객체로 사용하며 리터럴, 생성자 함수로 생성할 수 있다. RegExp.prototype.exec, RegExp.prototype.test 메서드가 쓰이며

const target = 'Is this all there is?';
const regExp = /is/;

regExp.exec(target); //['Is',index:5,input:'Is this all there is?', groups:undefined]
regExp.test(target); //true

보는 것이 이해가 빠를 것 같다. 보이는 그대로지만 알아둘 점은 exec 메서드는 g 플래그를 무시한다.
/ 내부에서의 패턴을 알아보면,

. : 임의의 문자 한개와 대응
{m, n} : 앞의 패턴이 m회 이상 n회 이하로 반복되는 문자열
{n} : 앞의 패턴이 n회 반복되는 문자열
{n,} : 앞의 패턴이 n회 이상 반복되는 무자열
+: 앞의 패턴이 최소 한 번 이상 반복되는 문자열 ({1,}와 같음)
? : 앞의 패턴이 최대 한 번 이상 반복되는 문자열({0,1}과 같음)
| : /A|B/인 경우 A 또는 B
[] : 내부의 문자를 or로 동작시킴
[A-Z+] : A~Z 대문자 알파벳이 한 번 이상 반복
\d,\D : [0-9], [^0-9]
\w, \W : [A-Za-z0-9_], [^A-Za-z0-9_]
^ : [] 안에선 not, 밖에선 문자열의 시작 (/^https/ : https로 시작하는가)
$ : 문자열의 마지막 (/com$/ : com로 끝나는가)

예제로 몇 가지를 알아보자.

//공백으로 시작하는가?
const target = ' Hi!';
/^[\s]+/.test(target); // true, \s : 여러 공백을 의미함

//특정 단어로 시작하는가?
const url = 'https://example.com';
/^https?:\/\//.text(url); // true

//핸드폰 번호 형식인가?
const cellphone = '010-1234-5678';
/^\d{3}-\d{4}-\d{4}$/.test(cellphone); // true

//MDN 예제이다. 이름을 세미콜론을 기준으로 구분하고 성을 뒤바꾸고 정렬한다.
var names = "Harry Trump ;Fred Barney; Helen Rigby ; Bill Abel ; Chris Hand ";

var output = ["---------- Original String\n", names + "\n"];

var pattern = /\s*;\s*/;

var nameList = names.split(pattern);

pattern = /(\w+)\s+(\w+)/;

var bySurnameList = [];

output.push("---------- After Split by Regular Expression");

var i, len;
for (i = 0, len = nameList.length; i < len; i++){
  output.push(nameList[i]);
  bySurnameList[i] = nameList[i].replace(pattern, "$2, $1");
}

output.push("---------- Names Reversed");
for (i = 0, len = bySurnameList.length; i < len; i++){
  output.push(bySurnameList[i]);
}

bySurnameList.sort();
output.push("---------- Sorted");
for (i = 0, len = bySurnameList.length; i < len; i++){
  output.push(bySurnameList[i]);
}

output.push("---------- End");

console.log(output.join("\n"));

정규 표현식은 많이 써보면서 익숙해지는 것이 중요한 것 같다.

String

자바스크립트에서의 String은 우리가 아는 그 문자열이다. 표준 빌트인 객체이고 생성자 함수 객체이다. 인덱스를 사용해 접근할 수 있고, 인덱스를 나타내는 숫자 형식의 문자열을 프로퍼티 키, 각 문자를 프로퍼티 값으로 가지는 유사 배열 객체이다. 그리고 배열과는 다르게 원시값이기 때문에 읽기 전용 객체이고 원본을 변경하는 메서드가 없다. 위의 정규 표현식을 사용하는 메서드도 존재한다는게 특징이다.

const str = 'Hello world';

// 정규 표현식을 사용하는 메서드들
str.search(/o/); // 4, 없다면 -1 반환
str.match(/llo/); // ['llo', index:2, input:'hello world', groups:undefined]
str.replace('world', '<strong>$&</strong>'); // Hello <strong>world</strong>
str.replace("wor","$'"); // Hello ldld
//replace 메서드는 특수한 교체 패턴이 존재한다. 
//$$ : $ 삽입, $& : 매치된 문자열 삽입, $` : 매치된 문자열 앞까지의 문자열 삽임
//$' : 매치된 문자열의 뒷부분 문자열 삽입
str.split(/\s/); // ["Hello", "world"], 공백으로 구분해서 배열 반환

// 정규 표현식을 사용하지 않는 메서드들
str.indexOf('l'); // 2, 없으면 -1 반환
str.includes('world'); // true
str.startsWith('He',0); // true, 2번째 인수는 시작위치
str.endsWith('lo',5); // true, 2번째 인수는 자를 길이
str.charAt(2); // l, 해당 인덱스의 문자 반환
str.substring(1,4); // ell, 1 번째 ~ 4 번째 직전까지의 문자열 반환
str.slice(-5); // world, substring과 같지만 substring는 음수나 NaN은 0으로 취급
str.trim() // 문자열 앞뒤 공백 제거
str.toUpperCase(); // HELLO WORLD
str.toLowercase(); // hello world
str.repeat(2.5); // hello world hello world, 음수는 에러, 소수점 버림, 0은 빈 문자열