Javascript replace 특수문자 제거 - javascript replace teugsumunja jegeo

어느 언어로 코딩을 하든, 문자열 의 컨트롤은 중요하다. 그 중에서도 특수문자 들이 문제가 생기는 경우가 자주 발생하는데, 정규표현식 을 사용하여 특수문자를 제거 하는 방법을 알아보자.

2. 사용법

2.1. Ex1

let Str = "ads$, yt4642# vghg &";
const regExp = /[\{\}\[\]\/?.,;:|\)*~`!^\-+<>@\#$%&\\\=\(\'\"]/gi;

Str = Str.replace(regExp, "");
console.log(Str);

// => ads yt4642 vghg

regExp 변수에 정규표현식 을 작성해주고, replace에서 regExp조건에 맞는 문자가 있다면 ""로 전환한다. 주의 할 점은 ""은 제거 이고 " " 는 공백으로 치환 하는 것이다.

JavaScript/JavaScript 문법

[JavaScript]특정 문자열을 제거하는 4가지 방법

목차

JavaScript에서 특정 문자열을 제거하는 4가지 유용한 방법을 소개합니다.

substr(), substring(), slice(), replace() 4가지 함수를 사용하여 문자열을 제거할 수 있습니다.

replace() 함수는 문자열을 대체하는 기능을 가졌지만, 특정 문자열을 빈 값('')으로 대체함으로써 제거하는 방법처럼 사용할 수 있습니다.

이번 포스팅은 위에서 소개한 4가지 함수 사용 방법을 정리하였습니다.

substr() 함수를 사용하여 길이만큼 문자열을 추출

substr() 함수는 특정 위치에서 시작하여 길이만큼 문자열을 반환합니다.

str.substr(start, length)

start

- 추출하고자 하는 문자열의 시작 위치입니다.

- 음수일 경우 시작 위치는 문자열의 길이 + start의 결괏값으로 설정됩니다.

length(생략 가능)

- 시작 위치에서 추출할 문자들의 개수입니다.

- 생략하면, 마지막 위치까지 추출합니다.

- 음수일 경우

var str = 'ABCDEF';

// 1번째 위치에서 마지막까지 추출합니다.
console.log(str.substr(1));
// BCDEF

// 1번째 위치에서 4개의 문자열을 추출합니다.
console.log(str.substr(1, 4));
// BCDE

// 첫 번째 매개변수가 음수일 경우 
// 첫 번째 매개변수의 값 : str.length + (-5) = 1
// 즉, 1번째 위치에서 2개의 문자열을 추출합니다.
console.log(str.substr(-5, 2));
// BC

var str = 'ABCDEF';

// 1번째 위치에서 마지막까지 추출합니다.
console.log(str.substr(1));
// BCDEF

// 1번째 위치에서 4개의 문자열을 추출합니다.
console.log(str.substr(1, 4));
// BCDE

// 첫 번째 매개변수가 음수일 경우 
// 첫 번째 매개변수의 값 : str.length + (-5) = 1
// 즉, 1번째 위치에서 2개의 문자열을 추출합니다.
console.log(str.substr(-5, 2));
// BC

맨 마지막 코드인

var str = 'ABCDEF';

// 1번째 위치에서 마지막까지 추출합니다.
console.log(str.substr(1));
// BCDEF

// 1번째 위치에서 4개의 문자열을 추출합니다.
console.log(str.substr(1, 4));
// BCDE

// 첫 번째 매개변수가 음수일 경우 
// 첫 번째 매개변수의 값 : str.length + (-5) = 1
// 즉, 1번째 위치에서 2개의 문자열을 추출합니다.
console.log(str.substr(-5, 2));
// BC

첫 번째 매개변수가 음수인 -5이므로

var str = 'ABCDEF';

// 1번째 위치에서 마지막까지 추출합니다.
console.log(str.substr(1));
// BCDEF

// 1번째 위치에서 4개의 문자열을 추출합니다.
console.log(str.substr(1, 4));
// BCDE

// 첫 번째 매개변수가 음수일 경우 
// 첫 번째 매개변수의 값 : str.length + (-5) = 1
// 즉, 1번째 위치에서 2개의 문자열을 추출합니다.
console.log(str.substr(-5, 2));
// BC

var str = 'ABCDEF';

// 1번째 위치에서 마지막까지 추출합니다.
console.log(str.substr(1));
// BCDEF

// 1번째 위치에서 4개의 문자열을 추출합니다.
console.log(str.substr(1, 4));
// BCDE

// 첫 번째 매개변수가 음수일 경우 
// 첫 번째 매개변수의 값 : str.length + (-5) = 1
// 즉, 1번째 위치에서 2개의 문자열을 추출합니다.
console.log(str.substr(-5, 2));
// BC

그러므로 1번째 위치에서 2개의 문자열을 추출합니다.

substr 함수 주의사항

substr함수는 동작하는데 문제가 없으나 바람직하지 않은 특징을 가지고 있습니다.

언젠가는 제거될 함수이므로 substr 함수가 무조건 존재한다고 생각하시면 안 됩니다.

substring() 함수를 사용하여 인덱스 범위만큼 문자열을 추출

var str = 'ABCDEF';

// 1번째 위치에서 마지막까지 추출합니다.
console.log(str.substr(1));
// BCDEF

// 1번째 위치에서 4개의 문자열을 추출합니다.
console.log(str.substr(1, 4));
// BCDE

// 첫 번째 매개변수가 음수일 경우 
// 첫 번째 매개변수의 값 : str.length + (-5) = 1
// 즉, 1번째 위치에서 2개의 문자열을 추출합니다.
console.log(str.substr(-5, 2));
// BC

str.substring(indexStart, indexEnd)

indexStart

- 추출하고자 하는 문자열의 시작 인덱스입니다.

- 0 보다 작을 경우 0으로 처리됩니다.

- 문자열이 길이보다 큰 값이면, 문자열의 길이로 처리되어

var str = 'ABCDEF';

// 1번째 위치에서 마지막까지 추출합니다.
console.log(str.substr(1));
// BCDEF

// 1번째 위치에서 4개의 문자열을 추출합니다.
console.log(str.substr(1, 4));
// BCDE

// 첫 번째 매개변수가 음수일 경우 
// 첫 번째 매개변수의 값 : str.length + (-5) = 1
// 즉, 1번째 위치에서 2개의 문자열을 추출합니다.
console.log(str.substr(-5, 2));
// BC

indexEnd(생략 가능)

- 설정된 값의 이전 인덱스까지 문자열을 추출합니다.

- 생략하면 마지막 인덱스까지 문자열을 추출합니다.

var str = 'ABCDEF';

// 1번째 인덱스에서 마지막 위치까지 문자열을 반환합니다.
console.log(str.substring(1));
// BCDEF

// 1번째 인덱스에서 4번째 인덱스 전 까지 문자열을 반환합니다.
console.log(str.substring(1, 4));
// BCD

// str.substring(1, 4) 동일한 결과입니다.
console.log(str.substring(4, 1));
// BCD

// 음수이므로 0번째 인덱스로 설정됩니다.
console.log(str.substring(-1));
// ABCDEF

var str = 'ABCDEF';

// 1번째 위치에서 마지막까지 추출합니다.
console.log(str.substr(1));
// BCDEF

// 1번째 위치에서 4개의 문자열을 추출합니다.
console.log(str.substr(1, 4));
// BCDE

// 첫 번째 매개변수가 음수일 경우 
// 첫 번째 매개변수의 값 : str.length + (-5) = 1
// 즉, 1번째 위치에서 2개의 문자열을 추출합니다.
console.log(str.substr(-5, 2));
// BC

var str = 'ABCDEF';

// 1번째 위치에서 마지막까지 추출합니다.
console.log(str.substr(1));
// BCDEF

// 1번째 위치에서 4개의 문자열을 추출합니다.
console.log(str.substr(1, 4));
// BCDE

// 첫 번째 매개변수가 음수일 경우 
// 첫 번째 매개변수의 값 : str.length + (-5) = 1
// 즉, 1번째 위치에서 2개의 문자열을 추출합니다.
console.log(str.substr(-5, 2));
// BC

var str = 'ABCDEF';

// 1번째 위치에서 마지막까지 추출합니다.
console.log(str.substr(1));
// BCDEF

// 1번째 위치에서 4개의 문자열을 추출합니다.
console.log(str.substr(1, 4));
// BCDE

// 첫 번째 매개변수가 음수일 경우 
// 첫 번째 매개변수의 값 : str.length + (-5) = 1
// 즉, 1번째 위치에서 2개의 문자열을 추출합니다.
console.log(str.substr(-5, 2));
// BC

반응형

slice 함수를 사용하여 인덱스 범위만큼 문자열을 생성

var str = 'ABCDEF';

// 1번째 위치에서 마지막까지 추출합니다.
console.log(str.substr(1));
// BCDEF

// 1번째 위치에서 4개의 문자열을 추출합니다.
console.log(str.substr(1, 4));
// BCDE

// 첫 번째 매개변수가 음수일 경우 
// 첫 번째 매개변수의 값 : str.length + (-5) = 1
// 즉, 1번째 위치에서 2개의 문자열을 추출합니다.
console.log(str.substr(-5, 2));
// BC

var str = 'ABCDEF';

// 1번째 위치에서 마지막까지 추출합니다.
console.log(str.substr(1));
// BCDEF

// 1번째 위치에서 4개의 문자열을 추출합니다.
console.log(str.substr(1, 4));
// BCDE

// 첫 번째 매개변수가 음수일 경우 
// 첫 번째 매개변수의 값 : str.length + (-5) = 1
// 즉, 1번째 위치에서 2개의 문자열을 추출합니다.
console.log(str.substr(-5, 2));
// BC

str.substring(indexStart, indexEnd)

indexStart

- 추출하고자 하는 문자열의 시작 인덱스입니다.

- 0 보다 작을 경우 문자열의 길이 + indexStart의 결괏값으로 설정됩니다.

- 문자열이 길이보다 크거나 같으면, 빈 값을 반환합니다.

indexEnd(생략 가능)

- 설정된 값의 이전 인덱스까지 문자열을 추출합니다.

- 생략하면 마지막 인덱스까지 문자열을 추출합니다.

- 0 보다 작을 경우 문자열의 길이 + indexEnd의 결괏값으로 설정됩니다.

var str = 'ABCDEF';

// 1번째 인덱스에서 마지막 위치까지 문자열을 반환합니다.
console.log(str.slice(1));
// BCDEF

// 1번째 인덱스에서 4번째 인덱스 전 까지 문자열을 반환합니다.
console.log(str.slice(1, 4));
// BCD

// 첫 번째 매개변수의 값: 문자열의 길이(6) + (-1) = 5 입니다.
// 두 번째 매개변수가 생략되었기에 5번째 인덱스에서 마지막 위치까지 문자열을 반환합니다.
console.log(str.slice(-1));
// F

// 첫 번째 매개변수의 값: 문자열의 길이(6) + (-4) = 2 
// 두 번째 매개변수의 값: 문자열의 길이(6) + (-1) = 5 
// 2번째 인덱스에서 5번째 인덱스 전 까지 문자열을 반환합니다.
console.log(str.slice(-4 , -1));
// CDE

substring() 함수와 slice() 함수의 차이점

var str = 'ABCDEF';

// 1번째 위치에서 마지막까지 추출합니다.
console.log(str.substr(1));
// BCDEF

// 1번째 위치에서 4개의 문자열을 추출합니다.
console.log(str.substr(1, 4));
// BCDE

// 첫 번째 매개변수가 음수일 경우 
// 첫 번째 매개변수의 값 : str.length + (-5) = 1
// 즉, 1번째 위치에서 2개의 문자열을 추출합니다.
console.log(str.substr(-5, 2));
// BC

var str = 'ABCDEF';

// 1번째 위치에서 마지막까지 추출합니다.
console.log(str.substr(1));
// BCDEF

// 1번째 위치에서 4개의 문자열을 추출합니다.
console.log(str.substr(1, 4));
// BCDE

// 첫 번째 매개변수가 음수일 경우 
// 첫 번째 매개변수의 값 : str.length + (-5) = 1
// 즉, 1번째 위치에서 2개의 문자열을 추출합니다.
console.log(str.substr(-5, 2));
// BC

• var str = 'ABCDEF';
  
  // 1번째 위치에서 마지막까지 추출합니다.
  console.log(str.substr(1));
  // BCDEF
  
  // 1번째 위치에서 4개의 문자열을 추출합니다.
  console.log(str.substr(1, 4));
  // BCDE
  
  // 첫 번째 매개변수가 음수일 경우 
  // 첫 번째 매개변수의 값 : str.length + (-5) = 1
  // 즉, 1번째 위치에서 2개의 문자열을 추출합니다.
  console.log(str.substr(-5, 2));
  // BC

  4 함수는 첫 번째 매개변수가 두 번째 매개변수보다 클 경우 값을 교환하여 동작합니다.

• var str = 'ABCDEF';
  
  // 1번째 위치에서 마지막까지 추출합니다.
  console.log(str.substr(1));
  // BCDEF
  
  // 1번째 위치에서 4개의 문자열을 추출합니다.
  console.log(str.substr(1, 4));
  // BCDE
  
  // 첫 번째 매개변수가 음수일 경우 
  // 첫 번째 매개변수의 값 : str.length + (-5) = 1
  // 즉, 1번째 위치에서 2개의 문자열을 추출합니다.
  console.log(str.substr(-5, 2));
  // BC

  9 함수는 첫 번째 매개변수가 두 번째 매개변수보다 클 경우 빈 값을 반환합니다.

• var str = 'ABCDEF';
  
  // 1번째 위치에서 마지막까지 추출합니다.
  console.log(str.substr(1));
  // BCDEF
  
  // 1번째 위치에서 4개의 문자열을 추출합니다.
  console.log(str.substr(1, 4));
  // BCDE
  
  // 첫 번째 매개변수가 음수일 경우 
  // 첫 번째 매개변수의 값 : str.length + (-5) = 1
  // 즉, 1번째 위치에서 2개의 문자열을 추출합니다.
  console.log(str.substr(-5, 2));
  // BC

  4 함수는 첫 번째 매개변수가 음수일 경우 0으로 처리됩니다.

• var str = 'ABCDEF';
  
  // 1번째 위치에서 마지막까지 추출합니다.
  console.log(str.substr(1));
  // BCDEF
  
  // 1번째 위치에서 4개의 문자열을 추출합니다.
  console.log(str.substr(1, 4));
  // BCDE
  
  // 첫 번째 매개변수가 음수일 경우 
  // 첫 번째 매개변수의 값 : str.length + (-5) = 1
  // 즉, 1번째 위치에서 2개의 문자열을 추출합니다.
  console.log(str.substr(-5, 2));
  // BC

  9 함수는 첫 번째 매개변수가 음수일 경우 문자열의 길이 + 첫 번째 매개변수의 결괏값으로 설정됩니다.

replace() 함수를 사용하여 특정 문자열을 빈 값('')으로 대체

replace() 함수는 정규식을 만족하거나 특정 문자열이 존재할 경우 원하는 문자열로 대체할 수 있습니다.

var str = 'ABCDEF';

// 문자열 'A'를 빈 값으로 대체합니다.
console.log(str.replace('A', ''));
// BCDEF

// 문자열 'F'를 빈 값으로 대체합니다.
console.log(str.slice('F', ''));
// ABCDE

반응형

공유하기

게시글 관리

저작자표시 비영리 변경금지

• 카카오스토리
• 트위터
• 페이스북

'JavaScript > JavaScript 문법' 카테고리의 다른 글

태그

댓글0

비밀글

등록