[ 자바스크립트 ] 문자열에서의 replace() 사용법

[ Javascript ] replace() in the string

1. 단순 문자를 이용하는 방법 ( Using the text )
2. 정규식을 이용하는 방법 ( Using the regular expression )
3. 함수를 이용하는 방법 ( Using the function )

1. 단순 문자를 이용하는 방법 ( Using the text )

(1) 문자 일부를 삭제하기 ( Removing text )

<button onclick="testing()"> Click me </button>
<pre id="demo"></pre>
<script type="text/javascript">
function testing () { 
    var str = "Aaahhh!!"; 
    var change = str.replace( "aa", "" ); 
    demo.innerHTML = change; 
} 
</script>

<button onclick="testing()"> Click me </button>
<pre id="demo"></pre>
<script type="text/javascript">
function testing () { 
    var str = "Aaahhh!! Aaahhh!!"; 
    var change = str.replace( "aa", "" ); 
    demo.innerHTML = change; 
} 
</script>

맨 처음에 찾아낸 것만 삭제됨. 따라서 같은 문자를 몽땅 다 삭제하려면, 정규식이나 함수를 사용해야됨.
( Only the first matched text will be deleted.
  So if you want to delete all the same text, you have to use "regular expression" or "function". )

(2) 다른 문자로 바꾸기 ( Changing to another text )

<button onclick="testing()"> Click me </button>
<pre id="demo"></pre>
<script type="text/javascript">
function testing () { 
    var str = "What??"; 
    var change = str.replace( "What", "Who" ); 
    demo.innerHTML = change; 
} 
</script>

<button onclick="testing()"> Click me </button>
<pre id="demo"></pre>
<script type="text/javascript">
function testing () { 
    var str = "Hmmm"; 
    var change = str.replace(  "mmm",  "mmm" + "..."  ); 
    demo.innerHTML = change; 
} 
</script>

<button onclick="testing()"> Click me </button>
<pre id="demo"></pre>
<script type="text/javascript">
function testing () { 
    var str = "Hmmm"; 
    var change = str.replace(  "mmm",  "$&" + "..."  ); 
    demo.innerHTML = change; 
} 
</script>

$& : 찾아낸 문자들이 들어있음. 단!! IE 9 이상. ( It contains matched text. IE 9+ )

<button onclick="testing()"> Click me </button>
<pre id="demo"></pre>
<script type="text/javascript">
function testing () { 
    var str = "Caution!!"; 
    var replacer = "<b style='color: #930; font-size: 14px'>$&</b>"; 
    var change = str.replace(  "Caution!!",  replacer  ); 
    demo.innerHTML = change; 
} 
</script>

<button onclick="testing()"> Click me </button>
<pre id="demo"></pre>
<script type="text/javascript">
function testing () { 
    var str = "Step by step"; 
    var change = str.replace(  " by ",  ", step, "  ); 
    demo.innerHTML = change; 
} 
</script>

<button onclick="testing()"> Click me </button>
<pre id="demo"></pre>
<script type="text/javascript">
function testing () { 
    var str = "Step by step"; 
    var change = str.replace(  " by ",  ", $', "  ); 
    demo.innerHTML = change; 
} 
</script>

$' : 현재 문장에서, 찾은 문자 뒤쪽에 있는 문장이 들어있음.
( It contains the text, that is right after the matched text in the given string. )

<button onclick="testing()"> Click me </button>
<pre id="demo"></pre>
<script type="text/javascript">
function testing () { 
    var str = "Well, it's cool.    "; 
    var change = str.replace(  "Well,",  "$'"  ); 
    demo.innerHTML = change; 
} 
</script>

<button onclick="testing()"> Click me </button>
<pre id="demo"></pre>
<script type="text/javascript">
function testing () { 
    var str = "Good and devil."; 
    var change = str.replace(  " and",  "! Good"  ); 
    demo.innerHTML = change; 
} 
</script>

<button onclick="testing()"> Click me </button>
<pre id="demo"></pre>
<script type="text/javascript">
function testing () { 
    var str = "Good and devil."; 
    var change = str.replace(  " and",  "! $`"  ); 
    demo.innerHTML = change; 
} 
</script>

$` : 현재 문장에서, 찾은 문자 앞쪽에 있는 문장이 들어있음.
( It contains the text, that is right before the matched text in the given string. )

2. 정규식을 이용하는 방법 ( Using the regular expression )

정규식 관련 사이트 목록 ( Sites related to Regular Expressions. )

• 정규식( Regular Expressions ) - MDN
• JavaScript RegExp Reference - w3schools.com
• Regular Expression (RegExp) object - help.dottoro.com
• Regular Expressions and RegExp Object - tutorialspoint.com
• 정규표현식(Regular Expression)을 소개합니다. - Nextree

<button onclick="testing()"> Click me </button>
<pre id="demo"></pre>
<script type="text/javascript">
function testing () { 
    var str = "Aahhh!! Aaahhh!!"; 
    var change = str.replace(  "/a+/",  ""  ); 
    demo.innerHTML = change; 
} 
</script>

<button onclick="testing()"> Click me </button>
<pre id="demo"></pre>
<script type="text/javascript">
function testing () { 
    var str = "Aahhh!! Aaahhh!!"; 
    var change = str.replace(  "/a+/g",  ""  ); 
    demo.innerHTML = change; 
} 
</script>

<button onclick="testing()"> Click me </button>
<pre id="demo"></pre>
<script type="text/javascript">
function testing () { 
    var str = "Aahhh!! Aaahhh!!"; 
    var change = str.replace(  "/a+/gi",  "O"  ); 
    demo.innerHTML = change; 
} 
</script>

<button onclick="testing()"> Click me </button>
<pre id="demo"></pre>
<script type="text/javascript">
function testing () { 
    var str = "Aahhh!! Aaahhh!! \nAaaahhh!! Aaaaahhh!! "; 
    var change = str.replace(  "/^a+/i",  "O"  ); 
    demo.innerHTML = "\n" + change + "\n"; 
} 
</script>

<button onclick="testing()"> Click me </button>
<pre id="demo"></pre>
<script type="text/javascript">
function testing () { 
    var str = "Aahhh!! Aaahhh!! \nAaaahhh!! Aaaaahhh!! "; 
    var change = str.replace(  "/^a+/igm",  "O"  ); 
    demo.innerHTML = "\n" + change + "\n"; 
} 
</script>

<button onclick="testing()"> Click me </button>
<pre id="demo"></pre>
<script type="text/javascript">
function testing () { 
    var str = "Hmmm"; 
    var change = str.replace(  /m+/,  "$&" + "..."  ); 
    demo.innerHTML = change; 
} 
</script>

정규식을 이용한 경우에는, IE 8 이하에서도 "$&"를 사용할 수 있음.
If you use regular expressions, "$&" can also use in IE8 or lower.

<button onclick="testing()"> Click me </button>
<pre id="demo"></pre>
<script type="text/javascript">
function testing () { 
    var str = "01023456789"; 
    var change = str.replace(  /(\d{3})(\d{4})(\d{4})/,  "$&" + "  ▷  " + "$1-$2-$3"  ); 
    demo.innerHTML = change; 
} 
</script>

<button onclick="testing()"> Click me </button>
<pre id="demo"></pre>
<script type="text/javascript">
function testing () { 
    var str = "1  12  123  1234  12345,  1  122  1233345  4444  5677777"; 
    var change = str.replace(  /\d{2,}/g,  "-$&-"  ); 
    demo.innerHTML = change; 
} 
</script>

위의 예문은, 숫자가 둘 이상인 부분을 찾는 방법이다.
The above example is a way to find two or more numbers repeating.

<button onclick="testing()"> Click me </button>
<pre id="demo"></pre>
<script type="text/javascript">
function testing () { 
    var str = "1  12  123  1234  12345,  1  122  1233345  4444  5677777"; 
    var change = str.replace(  /(\d)\1+/g,  "-$&-"  ); 
    demo.innerHTML = change; 
} 
</script>

위의 예문은, 같은 숫자가 반복되는 부분을 찾는 방법이다.
The above example is a way to find the same numbers repeated.

3. 함수를 이용하는 방법 ( Using the function )

<button onclick="testing()"> Click me </button>
<pre id="demo"></pre>
<script type="text/javascript">
function testing () { 
    var str = "JavaScript is the programming language of Html and the Web."; 
    var change = str.replace(  /html/i,  function ( match ){  return match.toUpperCase();  }  ); 
    demo.innerHTML = change; 
} 
</script>

match = $&. 찾아낸 문자 ( matched text )

<button onclick="testing()"> Click me </button>
<pre id="demo"></pre>
<script type="text/javascript">
function testing () { 
    var str = "JavaScript is the programming language of Html and the Web."; 
    var result; 
    str.replace(  /html/i,  function ( match ){  result = match;  }  ); 
    demo.innerHTML = result; 
} 
</script>

<button onclick="testing()"> Click me </button>
<pre id="demo"></pre>
<script type="text/javascript">
function testing () { 
    var str = "JavaScript is the programming language of Html and the Web."; 
    var result; 
    str.replace(  /html/i,  function ( match, offset ){  result = offset;  }  ); 
    demo.innerHTML = result; 
} 
</script>

offset : 현재 문장 안에서, 찾아낸 문자의 위치. ( The starting position of matched text in the given string. )

<button onclick="testing()"> Click me </button>
<pre id="demo"></pre>
<script type="text/javascript">
function testing () { 
    var str = "JavaScript is the programming language of Html and the Web."; 
    var result; 
    str.replace(  /html/i,  function ( match, offset, string ){  result = string;  }  ); 
    demo.innerHTML = result; 
} 
</script>

string : 검색이 실행될 문장 즉, 현재 주어진 문장 전체. ( The full text of given string. )

<button onclick="testing()"> Click me </button>
<pre id="demo"></pre>
<script type="text/javascript">
function testing () { 
    var str = "JavaScript is the programming language of Html and the Web."; 
    var result; 
    str.replace(  /html/i,  function ( match, offset, string ){  result = string.substr( offset );  }  ); 
    demo.innerHTML = result; 
} 
</script>

<button onclick="testing()"> Click me </button>
<pre id="demo"></pre>
<script type="text/javascript">
function testing () { 
    var str = "JavaScript is the programming language of Html and the Web."; 
    var result; 
    str.replace(  /html/i,  function ( match, offset, string ){  result = string.substr(  0, offset );  }  ); 
    demo.innerHTML = result; 
} 
</script>

<button onclick="testing()"> Click me </button>
<pre id="demo"></pre>
<script type="text/javascript">
var strList = [ 
          "The first day is 1654-01-01. It’s New Year’s Day." 
        , "The second day is 1987-02-14. It’s Valentine’s Day." 
        , "The third day is 2003-12-25. It’s Christmas." 
]; 
var regEx = /(\d+)[-](\d+)[-](\d+)/; 

function testing () { 
    var x, str, result; 
    var func = function ( match ){ 
                    return ' “ ' + match + ' ” '; 
    }; 
    var array = [ ]; 
    for ( x = 0; x < strList.length; x++ ){ 
            str = strList[ x ]; 
            result = str.replace( regEx, func ); 
            array.push( result ); 
    } 
    demo.innerHTML = "\n" + array.join( "\n" ) + "\n"; 
} 
</script>

<button onclick="testing()"> Click me </button>
<pre id="demo"></pre>
<script type="text/javascript">
var strList = [ 
          "The first day is 1654-01-01. It’s New Year’s Day." 
        , "The second day is 1987-02-14. It’s Valentine’s Day." 
        , "The third day is 2003-12-25. It’s Christmas." 
]; 
var regEx = /(\d+)[-](\d+)[-](\d+)/; 

function testing () { 
    var x, str, result; 
    var func = function ( match, sub1, sub2, sub3 ){ 
                    return sub2 + "/" + sub3 + "/" + sub1; 
    }; 
    var array = [ ]; 
    for ( x = 0; x < strList.length; x++ ){ 
            str = strList[ x ]; 
            result = str.replace( regEx, func ); 
            array.push( result ); 
    } 
    demo.innerHTML = "\n" + array.join( "\n" ) + "\n"; 
} 
</script>

sub1 = $1
sub2 = $2
sub3 = $3

:
:
:

sub9 = $9

<button onclick="testing()"> Click me </button>
<pre id="demo"></pre>
<script type="text/javascript">
var strList = [ 
          "The first day is 1654-01-01. It’s New Year’s Day." 
        , "The second day is 1987-02-14. It’s Valentine’s Day." 
        , "The third day is 2003-12-25. It’s Christmas." 
]; 
var regEx = /(\d+)[-](\d+)[-](\d+)/; 

function testing () { 
    var x, str, result; 
    var func = function ( match, sub1, sub2, sub3, offset, string ){ 
                    result = string.substr( offset );
    }; 
    var array = [ ]; 
    for ( x = 0; x < strList.length; x++ ){ 
            str = strList[ x ]; 
            str.replace( regEx, func ); 
            array.push( result ); 
    } 
    demo.innerHTML = "\n" + array.join( "\n" ) + "\n"; 
} 
</script>

<button onclick="testing()"> Click me </button>
<pre id="demo"></pre>
<script type="text/javascript">
function testing () { 
    var str = "\n 1654-01-05 \n 1987-02 \n 2003 \n"; 
    var reg = /(\d+)[-]?(\d*)[-]?(\d*)/g; 
    var func = function ( match, sub1, sub2, sub3 ){ 
                        return sub2 + "/" + sub3 + "/" + sub1; 
    }; 
    var change = str.replace( reg,  func ); 
    demo.innerHTML = change; 
} 
</script>

<button onclick="testing()"> Click me </button>
<pre id="demo"></pre>
<script type="text/javascript">
function testing () { 
    var str = "\n 1654-01-05 \n 1987-02 \n 2003 \n"; 
    var reg = /(\d+)[-]?(\d*)[-]?(\d*)/g; 
    var func = function ( match, sub1, sub2, sub3 ){ 
                        var text = ""; 
                        var arr = [ sub2, sub3, sub1 ]; 
                        for ( var x = 0; x < arr.length; x++ ){  if ( arr[x] ) text += arr[ x ] + "/";  } 
                        return text.substr( 0, text.length - 1 ); 
    }; 
    var change = str.replace( reg,  func ); 
    demo.innerHTML = change; 
} 
</script>

<button onclick="testing()"> Click me </button>
<pre id="demo"></pre>
<script type="text/javascript">
function testing () { 
    var str = "\n 1654-01-05 \n 1987-02 \n 2003 \n"; 
    var reg = /\d+[-]?\d*[-]?\d*/g; 
    var func = function ( match ){ 
                        return match.split( /[-]/g ).join( "/" ); 
    }; 
    var change = str.replace( reg,  func ); 
    demo.innerHTML = change; 
} 
</script>

https://tonks.tistory.com/219#_javascript_string_replace

이 내용이 도움이 되셨다면, 아래의 하트 버튼을 눌러주세요 *^^*
If this article is helpful to you, please click the heart button below. :)