replace

replace() 메서드는 지정된 문자열 또는 정규식패턴과 첫번째로 일치하는 문자열이 교체된 문자열을 반환합니다.
새로운 문자열을 반환합니다.

str.replace(regexp|substr, newSubstr|function)
regexp|substr: 변경 대상 문자열 혹은 정규식 패턴
newSubstr|function: 변경할 문자열

NOTE: 일치하는 첫번째 문자열만 변경합니다.

const str = 'I like you and I love you.';
console.log(str.replace('and', 'or'));
// output: "I like you or I love you."

console.log(str.replace('you', 'myself'));
// output: "I like myself or I love you."

console.log(str.replace(/you/, 'myself'));
// output: "I like myself or I love you."

첫번째 매치된 you만 변경되고 뒤에는 그대로 변경되지 않습니다.

NOTE: 정규식 플래그(g)를 사용하면 전부 변경할 수 있습니다.

replace with regex

replace 메서드는 정규식 패턴을 첫번째 인자로 받습니다.
정규식 패턴을 이용하여 문자열을 변경할 있는데 여기에 정규식 flag g(global)을 활용하여 일치하는 모든 문자를 변경할 수 있습니다.

const str = 'I like apple apple apple.';
console.log(str.replace(/apple/, 'banana'));
// output: "I like banana apple apple."

console.log(str.replace(/apple/g, 'banana'));
// output: "I like banana banana banana."

replace with regex 특수 교체 패턴

replacement 문자열은 다음과 같은 특수 교체 패턴을 포함할 수 있습니다.

Pattern	Inserts
$$	"$" 기호를 삽입합니다.
$&	매치된 문자열을 삽입합니다.
$`	매치된 문자열 앞쪽까지의 문자열을 삽입합니다.
$'	매치된 문자열의 문자열을 삽입합니다.
$n	n이 1이상 99이하의 정수라면, 첫번째 매개변수로 넘겨진 RegExp객체에서 소괄호로 묶인 n번째의 부분 표현식으로 매치된 문자열을 삽입합니다.

$n을 활용하여 매칭된 문자열을 재배치해보겠습니다.

const str = 'I like apple banana grape.';
console.log(str.replace(/(\w+) banana (\w+)/, '$2 kiwi $1'));
// output: "I like grape kiwi apple."

정규식 간단 설명
\w: 밑줄 문자를 포함한 영어, 숫자, 문자
+: 1번 이상 반복되는 문자열
(): 문자열 그룹으로 매칭되는 문자열을 기억합니다.
apple banana grape. -> apple($1), grape($2) -> grape kiwi apple. 이렇게 변경되었습니다.

정규식을 잘 활용한다면 어려운 일도 쉽게 해결할 수 있습니다.
이번 기회에 정규식을 조금 더 공부해보시기 바랍니다.
(저도 아직 잘 못합니다.. ㅎㅎ;)

자바스크립트 javascript string 길이 length (0)	2020.08.08
자바스크립트 javascript 문자열 합치기 (0)	2020.08.08
자바스크립트 javascript 문자열 자르기 (0)	2020.08.07
[javascript] 자바스크립트 배열 array 유용한 함수 map (0)	2020.02.19
자바스크립트 javascript array to string 배열을 문자로 변경 (0)	2020.02.04

자바스크립트 javascript 문자열 자르기 substr, substring, slice, split

자바스크립트에서 문자열을 추출 자르기에 대해 알아보겠습니다.
javascript 문자열 내장 함수를 이용하여 문자열을 추출할 수 있습니다.

- substr

substr() 메서드는 문자열에서 시작 인덱스에서 시작하여 특정 문자 수 만큼의 문자들을 반환합니다.
새로운 문자열을 반환합니다.

Syntax: str.substr(start[, length])

start: 문자열 시작 인덱스, 0부터 시작합니다.
length: 추출할 문자열의 길이를 나타냅니다.

NOTE: length 생략할 경우 문자열의 끝까지 반환합니다.

const str = 'Big golas get big results.';
console.log(str.substr(1, 8));
// output: ig golas
console.log(str.substr(7));
// output: as get big results.

- substring

substring() 메서드는 문자열의 시작 인덱스로 부터 종료 인덱스 전 까지 문자열을 추출하여 반환합니다.
새로운 문자열을 반환합니다.

Syntax: str.substring(indexStart[, indexEnd])

indexStart: 추출할 문자열 시작 인덱스, 0부터 시작합니다.
indexEnd: 추출 종료 인덱스로 그 직전까지 추출됩니다.

NOTE: indexEnd 생략할 경우 문자열의 끝까지 반환합니다.

const str = 'Big golas get big results.';
console.log(str.substring(1, 8));
// output: ig gola
console.log(str.substring(7));
// output: as get big results.

- slice

slice() 메서드는 시작 인덱스부터 종료 인덱스 전까지의 문자열을 추출합니다
새로운 문자열을 반환합니다.

Syntax: str.slice(beginIndex[, endIndex])

beginIndex: 문자열 시작 인덱스, 0부터 시작합니다.
endIndex: 추출 종료 인덱스로 그 직전까지 추출됩니다.

NOTE: endIndex를 생략할 경우 문자열의 끝까지 반환합니다.
종료 인덱스 위치의 문자는 추출에 포함되지 않습니다.

const str = 'Big golas get big results.';
console.log(str.slice(8));
// output: "s get big results."
console.log(str);
// output: "Big golas get big results."

- split

split() 메서드는 문자열을 지정한 지정된 구분자를 이용하여 나눠진 문자 배열을 반환합니다.
새로운 배열을 반환합니다.

Syntax: str.split([separator[, limit]])

separator: 원본 문자열을 끊어야 할 부분을 나타내는 문자열을 나타냅니다.
limit: 반환할 문자 혹은 문자열의 갯수를 나타냅니다.

NOTE: limit 생략할 경우 구분된 모든 문자를 반환합니다.

const str = 'Big golas get big results.';
console.log(str.split(' '));
// output: [ 'Big', 'golas', 'get', 'big', 'results.' ]
console.log(str.split(' ', 2));
// output: [ 'Big', 'golas' ]

[Javascript] - 자바스크립트 javascript 문자열 찾기

[Javascript] - 자바스크립트 javascript 문자열 공백 제거 trim

[Javascript] - 자바스크립트 javascript 문자열 합치기

[Javascript] - 자바스크립트 javascript 문자열 바꾸기 치환

컬쳐N라이프

javascript split()

자바스크립트 javascript 문자열 바꾸기 치환

replace

replace with regex

replace with regex 특수 교체 패턴

'javascript' 카테고리의 다른 글