javascript replace -- JavaScript



Javascript replace를 정리를 하려다 잘 정리된 사이트가 있어 그것으로 대신한다.
중간중간 생략되어 있으니, 더 자세한 내용은 출처를 확인하기 바란다.



자바스크립트에서의 replace의 원형은 다음과 같습니다 -

String.replace(orgExp, replaceText)

- orgExp : 대상 String(문자열)에서 바꿀 문자열이나 적용할 규칙
- replaceText : orgExp를 통해 나온 문자열(교체된 문자열)


예를 들면, replace 메서드를 이용하면 다음과 같은 코드를 이용해 볼 수 있습니다 -
alert( ("This is a Test").replace("This", "That") );

 -> 결과 : 'That is a Test'라는 문자열이 메시지박스로 뜬다.


하지만 자바스크립트에서의 replace 명령어는 정규식을 지원하는 특수한 함수이기 때문에 다양한 응용이 가능합니다. 수많은 정규식 중 중요한 것으로는, g와 i가 있습니다.

g : 모든 문자에 대하여 적용
i : (영문) 대소문자를 가리지 않음.

g가 의미하는 바는, 첫번째 예에서 치환되는 대상 문자열 "This"는, 아무리 대상 문자열에 "This"라는 문자열이 많아도 치환되는 것은 하나 뿐 입니다. 하지만 그것을 전체 문자열에 대하여 치환한다는 의미로 해석할 수 있습니다.
i는 옵션 자체가 의미하는 그대로입니다. 예를 들면 -

alert( (/aAbBbCcdD/gi).replace("a", "에이") );
 -> 결과 : '에이에이BbCcdD'라는 문자열이 메시지박스로 뜬다.

\s : 띄어쓰기(공백)을 의미.
 -> '/', '['와 같은 특수한 문자들도 치환자 내에서는 '\/', '\['와 같이, '\'를 붙임으로서 사용이 가능합니다.
| : 여러 개의 문자열을 치환할 때 사용하는 정규식.
 -> 확인하시면 아시겠지만, 주석으로 처리된 코드와 동일한 결과를 보여줍니다.


또한, BBCode와 같이, 어떤 특정한 두 문자열 사이에 있는 문자열을 인식하는 정규식의 사용도 가능합니다.
<script language="javascript">
function doReplace()
{
    var divObj = document.getElementById("test");
    divObj.innerHTML = divObj.innerHTML.replace(/\[(.*?)\]/gi,"<b>$1</b>");
}
</script>

<div id="
test" style="padding:10px; border:1px #ccc solid; background-color:#f0f0f0;">[해당] 문자를 [굵게] 만들어보기</div>

<a href="javascript:doReplace();">여기</a>를 누르면 replace 치환자 정규식을 실행합니다.</a>

(.*?) : 어떤 두 문자열 사이에 있는 임의의 문자열을 의미.

출처 : http://kuna.wo.tc/939


추가) 2014.11.20

replaceAll 할 수 있는 다른 방법이 있다. (이 부분은 아이디어가 괜찮은 듯 ;) )

var test = "2014-11-20";
test = test.split("-").join("");

// result : 20141120


덧글

  • killofki 2014/05/22 11:49 # 답글

    ?)\] 가 작동할 줄은 몰랐습니다 ㄷㄷ..

    - 평상시 /\[([^\]]+)\]/ 형태로 쓰던 1人..
  • 어린왕자 2014/05/25 13:35 # 답글

    정규식이 많이 파워풀하죠. 알면 알수록 대단해요.
댓글 입력 영역