[ JavaScript ] String Methods & 정규표현식

String Methods

includes - 문자 포함 여부 반환

// 구문
str.includes(searchString[, position])


// 예제
const str = "안녕하세요~ 안녕하세요! 좋은 하루 되세요~";

console.log(str.includes('안녕하세요')); // true
console.log(str.includes('안녕', 9));  // false

 

 

indexOf - 문자열에서 주어진 값과 일치하는 첫 번째 인덱스 반환

// 구문
str.indexOf(searchValue[, fromIndex])

// 예제
const str = "cat dog cat bird";

console.log(str.indexOf('cat'));    // 0
console.log(str.indexOf('cat', 2)); // 8

 

 

substring - 부분 문자열 반환

// 구문
str.substring(indexStart[, indexEnd])
// 음수는 자동으로 0으로 바뀌고, 두 인자값은 자동 오름차순 정렬된다. 

// 예제
const str = "Mozila";

console.log(str.substring(1, 3)); // oz
console.log(str.substring(3, 1)); // oz

 

 

slice - 부분 문자열 반환(음수값 허용)

// 구문 
str.slice(beginIndex[, endIndex])
beginIndex ~ (endIndex - 1) 만큼 자름

// 예제
const str = "Mozila";

console.log(str.slice(-3, -1)); // il
console.log(str.slice(3, 0));   // ''

// 파이썬과 비교
str.slice(n) = str[n:]
str.slice(n, m) = str[n:m]
str.slice(-n) = str[-n:]
str.slice(-n, -m) = str[-n:-m]

 

 

charCodeAt - 주어진 인덱스에 대한 UTF-16 코드를 나타내는 정수값 반환

// 구문
str.charCodeAt(index)

// 예제
const str = 'abcdefg';

console.log(str.charCodeAt(0)); // 97
console.log(str.charCodeAt(1)); // 98

 

 

concat - 문자열 붙이기

// 구문 
str.concat(string2, string3[, ..., stringN])

// 예제
const str = "Hello";

console.log(str.concat(" ", "World!")); // Hello World!

 

 

repeat - 문자열 반복

// 구문
str.repeat(count);

// 예제
console.log("abc".repeat(1)); // abc
console.log("abc".repeat(2)); // abcabc

 

 

split - 문자열 쪼개기

// 구문
str.split([separator[, limit]])
// limit는 반환하는 배열의 최대 길이

 

 

padEnd - 문자열 채우기(뒤)

// 구문
str.padEnd(targetLength [, padString])


// 예제
const str = 'haha';
console.log(str.padEnd(10, '.')); // haha......
// 문자열 10으로 고정. 앞부터 str로 채우고 빈칸은 '.' 으로

 

 

padStart - 문자열 채우기(앞)

// 구문
str.padStart(targetLength [, padString])


// 예제
const str = '5';
console.log(str.padStart(3, '0')); // 005
// 문자열 길이 3으로 고정. 뒤부터 str로 채우고 빈칸은 '0'으로

 

 

• toLowerCase() : 모두 소문자로 변환
• toUpperCase() : 모두 대문자로 변환
• trim() : 양끝 공백만 제거

 

정규표현식

정규표현식은 문자열에서 특정 내용을 찾거나 대체 또는 발췌하는데 사용한다. 여기서 실습을 진행할 수 있다.

정규식 생성

// 1. 리터럴 방식
const regexp = /^abc/;    // 표현식
const regexp = /^abc/gim; // 표현식/플레그

// 2. 생성자 함수 방식
const regexp = new RegExp("^abc");
const regexp = new RegExp("^abc", "gi");


// 참고: 정규식 내부에 변수를 넣는 방법
const a = 'a';
const str = 'abaabaaab'
const regexp = new RegExp(`${a}+`, 'gi');
str.match(regexp);

플래그 종류

Flag	Meaning	Description
i	ignoreCase	대소문자 구분x
g	global	문자열 내 모든 패턴 검색
m	multiline	문자열의 행이 바뀌더라도 검색 계속진행

메소드

• 정규식.exec(문자열) : 일치하는 하나의 배열 반환
• 정규식.test(문자열) : 탐색 결과 반환
• 문자열.match(정규식) : 일치하는 문자열 배열 반환
• 문자열.search(정규식) : 일치하는 문자열의 인덱스 반환
• 문자열.replace(정규식, 대체문자) : 정규식 일치문자를 대체문자로 대체
• 문자열.split(정규식) : 일치 문자를 기준으로 문자열 분할. 구분자를 () 안에 넣으면 구분자도 결과에 포함되는 것을 기억하자.

정규식 패턴

1)  ^  → 줄의 시작에서 일치하는지. 시작줄의 첫번째 단어만 검사한다.

 

2)  $  → 줄의 끝에서 일치하는지. 끝줄의 마지막 단어만 검사한다.

 

3)  .  → 임의의 한 문자와 일치(특수기호 띄어쓰기 포함)

 

4)  a|b  → or 조건. ‘a’도 검색하고 ‘b’도 검색.

 

5)  *  → 0회 이상 연속으로 반복되는 문자

   - /abc*/mg 탐색값 → ‘ab’, ‘abc’, ‘abcc’, ‘abccccc’

   - {0,} 와 동일

 

6)  +  → 1회 이상 연속으로 반복되는 문자

  - /abc+/mg 탐색값 → ‘abc’, ‘abcc’ ‘abcccc’

  - {1,} 와 동일

 

7)  ?  → 있어도 되고 없어도 되고

  - /abc?/mg 탐색값 → ‘ab’, ‘abc’ 

 

8)  {}  → 연속 일치 

  - {2} → 2개 연속 일치

  - {2,} → 2개 이상 연속 일치

  - {2,5} → 2개 이상 5개 이하 연속 일치

 

9)  (?=)  → 앞쪽 일치

  - 대한(?=민국) → ‘대한민국'에서 ‘대한'만 탐색. ‘대한독립'의 대한은 탐색되지 않는다.

 

10)  (?!)  → 부정 앞쪽 일치

  - 대한(?!민국) → '대한민국'을 제외하고 ‘대한'으로 시작하는 문자열에서 ‘대한'만 탐색.

 

11)  (?<=)  → 뒤쪽 일치

  - (?<=대한)민국 → ‘대한민국'에서 ‘민국'만 탐색. ‘왕왕민국'의 ‘민국’은 탐색되지 않는다.

 

12)  (?<!)  → 부정 뒤쪽 일치

  - (?<!대한)민국 → '대한민국'을 제외하고 ‘민국'으로 끝나는 문자열에서 ‘민국'만 탐색.

 

13)  ()  → 그룹화(캡쳐)

 

 

14)  []  → or 의미를 가진다 

  - [abc] == a|b|c ≠ ab|c

 

15)  -  → 문자 범위 지정

  - [a-e], [0-4], [다-자] 모두 가능

 

16)  [^e-o]  → e ~ o 가 아닌 나머지 문자에 일치

 

 

• \b → 영어 대소문자 + 숫자 + ‘_’ 이외의 문자에 일치하는 경계
• \B → 영어 대소문자 + 숫자 + ‘_’ 문자에 일치하는 경계
• \d → 숫자에 일치
• \D → 숫자가 아닌 문자에 일치
• \s → 공백에 일치
• \S → 공백이 아닌 문자에 일치
• \w → 영어 대소문자 + 숫자 + ‘_’ 문자에 일치
• \W → 영어 대소문자 + 숫자 + ‘_’ 이외의 문자에 일치

 

<참조>

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String  

https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Regular_Expressions  

https://heropy.blog/2018/10/28/regexp/