안녕하세요.
이 글은 replace() 메서드 사용법 중 첫 번째 인자로 정규 표현식을, 두 번째 인자로 콜백 함수를 작성하면서 콜백 함수의 인자 구성에 대해서 공부한 글입니다.
특정 문자열을 다른 문자열로 치환할 때 사용할 때 사용되는, **replace()** 함수에 대해서 알아보겠습니다.
replace() 와 replaceAll()의 차이
var str = "aabbcc";
var str1 = str.replace("a", "d");
console.log(str1); //dabbcc
var str2 = str.replaceAll("a", "d");
console.log(str2); //ddbbccreplace() 메서드는 찾고자 하는 문자열에 대해 처음 발견한 문자에 대해서만 치환을 수행합니다.
반면, replaceAll() 메서드는 베이스가 되는 문자열 전체에 대해 찾고자 하는 문자열을 끝까지 탐색하여 치환을 수행합니다.
replace(str, callback)
var str = "aabbcc";
str.replace("a", function(a, b, c){
console.log(a); //a
console.log(b); //0
console.log(c); //aabbcc
});두 번째 인자인 콜백함수의 인자 설명
- 첫 번째 인자
매치된 문자열 - 두 번째 인자
매치된 문자열의 시작 번호 - 세 번째 인자
전체 문자열, 즉 str
replace(regexp, callback)
정규 표현식에 따라서 콜백 함수의 인자들이 상이합니다.
우선 기본적으로 밑줄을 포함한 기본 라틴 알파벳의 모든 영숫자와 문자를 표현하는 /\w/ 를 정규 표현식으로 사용해 보겠습니다.
var str = "aabbcc";
str.replace(/\w/, function(a, b, c, d){
console.log(a); //a
console.log(b); //0
console.log(c); //aabbcc
console.log(d); //undefined
});- 첫 번째 인자
매치된 문자열 - 두 번째 인자
매치된 문자열의 시작 번호 - 세 번째 인자
전체 문자열, 즉 str
반면, 일련의 패턴 요소들을 하나의 요소로 묶는 소괄호를 사용해서 정규식을 감싸서 사용해 본다면 인자의 결과가 바뀌는 것을 알 수 있습니다.
두 번째 인자로 새로운 값이 생겨났습니다.
var str = "aabbcc";
str.replace(/(\w)/, function(a, b, c, d){
console.log(a); //a
console.log(b); //a
console.log(c); //0
console.log(d); //aabbcc
});- 첫 번째 인자
매치된 문자열 - 두 번째 인자
**매치된 문자 중 소괄호로 감싸진 문자** - 세 번째 인자
매치된 문자열의 시작 번호 - 네 번째 인자
전체 문자열, 즉 str
또한 문자열 전역 탐색을 의미하는 플래그 g를 추가한다면, 정규 표현식에 일치하는 모든 문자열에 대해서 함수가 실행됩니다.
var str = "Hello world";
str.replace(/(\w+)/g, function(a, b, c, d){
console.log(a);
console.log(b);
console.log(c);
console.log(d);
console.log('---------');
});- 결과
Hello
Hello
0
Hello world
---------
world
world
6
Hello world
---------
특수문자 치환하기
XSS공격을 대비하는 방법 중 하나로 사용자 입력값을 치환하는 방법입니다.
악성 스크립트 공격에 포함되어 브라우저에서 실행될 수 있는 문자를 대체 문자로 치환하여 스크립트 동작을 방지할 수 있습니다.
var map = {
"&": "&",
"<": "<",
">": ">",
"(": "(",
")": ")",
'"': '"',
"'": "'",
"/": "/"
};
function escapeHtml(str) {
return String(str).replace(/[&<>()"'\/]/g, (str) => {
return map[str];
});
}
var str = "&<Hello>()\"\'Wor/ld";
console.log(str);
console.log(escapeHtml(str));- 결과
&&"'Wor"ld
&<Hello>()"'Wor/ld
코드 설명
map: 위험 문자와 대체 문자를 key: value 쌍으로 저장합니다.escapeHtml:
첫 번째 인자: 정규 표현식으로 위험 문자들을 패턴화하며 플래그로 문자열 전역 탐색을 하도록 작성되었습니다.
두 번째 인자: 콜백 함수로 첫 번째 인자인 정규 표현식과 매치되는 문자열이 있다면 map[매칭된 문자열]의 값을 반환합니다.
쿼리문 이스케이핑
var sql = "SELECT * FROM study.test WHERE id = :id AND name = :name";
var values = {
"id": "1",
"name": "홍길동"
}
sql = sql.replace(/\:(\w+)/g, (value, columns) => { // value=[:id, :name] columns=[id, name]
if(values.hasOwnProperty(columns)){
return values[columns];
}
return value;
});
console.log(sql);- 결과
SELECT * FROM study.test WHERE id = 1 AND name = 홍길동
코드 설명
values: sql 쿼리문에 매칭될 값들을 key: value 쌍으로 저장합니다.sql.replace():
첫 번째 인자: 정규 표현식으로 시작 문자가:인 문자열을 패턴화하며 소괄호로 특정 문자열을 그룹화합니다. 플래그로 문자열 전역 탐색을 하도록 작성되었습니다.
두 번째 인자: 콜백 함수로 두 번째 인자인 정규 표현식과 매치되는 문자열 중 소괄호로 감싸진 문자열에 대해values_[매칭된 문자열]_이 존재한다면 해당 키에 대응하는 값을 반환합니다.
잘못된 부분이 있다면 언제든지 알려주세요! 🙇♀️
