본문 바로가기
Javascript

split( )/replace( )/replaceAll( )

by 코딩달림 2022. 8. 18.
728x90

문자열 메소드 - split( )/replace( )/replaceAll( )

문자열에서 원하는 값을 추출하거나 구분해서 배열로 반환하는 메소드입니다.

매소드 설명 문법
split( ) 문자열에서 원하는 값을 추출하여 배열로 반환합니다. "문자열".split(구분자);
"문자열".split(정규식 표현);
"문자열".split(구분자, 갯수);
replace( ) 문자열을 부분 문자열로 구분하고 배열로 반환합니다. "문자열".replace("찾을 문자열", "변경할 문자열")
"문자열".replace(정규식)
"문자열".replace(정규식, "변경할 문자열")
replaceAll( ) 문자열을 모든 부분 문자열로 구분하고 배열로 반환합니다. "문자열".replace("찾을 문자열", "변경할 문자열")

1. 문자열 메소드 : split( )

"문자열".split(구분자);
"문자열".split(정규식 표현);
"문자열".split(구분자, 갯수);

split( ) 메소드의 구분자에 아무것도 안적을시 한글자씩 배열을 나열하며, 빈 공백을 적을시 한 단어씩 나열합니다.
문자열을 적을 시 해당 문자만 추출하고 나머지 문자열을 나열합니다. 추출할 문자는 한번에 하나씩만 가능하나 정규식표현을 사용시 여러개의 문자를 추출이 가능합니다.

갯수는 추출할 문자의 갯수를 정합니다. 추출할 문자는 좌측부터 적용됩니다.

join( ) 메소드를 추가시 잘려서 나열된 각각의 문자 뒤에 추가한 문자가 출력됩니다. reverse( ) 메소드를 추가하면 반대로 나열하게 됩니다.

{
    const str1 = "javascript reference";
    const currentStr1 = str1.split('');     //['j', 'a', 'v', 'a', 's', 'c', 'r', 'i', 'p', 't', ' ', 'r', 'e', 'f', 'e', 'r', 'e', 'n', 'c', 'e']
    //한 글자씩 나열함
    const currentStr2 = str1.split(' ');    //['javascript', 'reference']
    //한 단어씩 나열함
    const currentStr3 = str1.split('', 1);  //['j']
    const currentStr4 = str1.split('', 2);  //['j', 'a']
    const currentStr5 = str1.split(' ', 1);  //['javascript']
    const currentStr6 = str1.split(' ', 2);  //['javascript', 'reference']
    const currentStr7 = str1.split('j');    //['', 'avascript reference']
    const currentStr8 = str1.split('a');    // ['j', 'v', 'script reference']\
    //정한 문자열 빠지고 도중에 빠진 문자가 독립해서 하나씩 나열됨
    const currentStr9 = str1.split('e');    //['javascript r', 'f', 'r', 'nc', '']
    // const currentStr10 = str1.split('').join('/');    //j/a/v/a/s/c/r/i/p/t/ /r/e/f/e/r/e/n/c/e

    const str2 = "java/script/refer/ence";
    const currentStr10 = str2.split('/');       //['java', 'script', 'refer', 'ence']

    const str3 = "java&script&refer!ence";
    const currentStr11 = str3.split('!');       //['java&script&refer', 'ence']
    const currentStr12 = str3.split('&');       //['java', 'script', 'refer!ence']
    const currentStr13 = str3.split(/&|\!/);    //['java', 'script', 'refer', 'ence']
    //|는 and같은 것. 정규식표현을 이용해서 2개 이상 찾을 수 있음
    
    const str4 = "javascrpt reference";
    const currentStr14 = str4.split('').join();     //j,a,v,a,s,c,r,p,t, ,r,e,f,e,r,e,n,c,e
    //join()이 배열 대신 문자열로 출력해줌
    const currentStr15 = str4.split('').join('*');  //j*a*v*a*s*c*r*p*t* *r*e*f*e*r*e*n*c*e
    const currentStr16 = str4.split('').reverse().join();   //e,c,n,e,r,e,f,e,r, ,t,p,r,c,s,a,v,a,j
    //reverse()는 반대로 출력해줌
    const currentStr17 = str4.split('').reverse().join('*');    //e*c*n*e*r*e*f*e*r* *t*p*r*c*s*a*v*a*j
}

2. 문자열 메서드 : replace( ) / replaceAll( )

"문자열".replace("찾을 문자열", "변경할 문자열")
"문자열".replace(정규식)
"문자열".replace(정규식, "변경할 문자열")

replace( ) / replaceAll( ) 메소드는 찾을 문자을 다른 문자로 바꿔 출력합니다.
replace( )의 경우 찾을 문자열이 여러개 포함되어 있더라도 첫번째 문자만 변경되지만, replaceAll( )은 해당하는 모든 문자열이 변경됩니다.

replace( )의 경우에도 정규식표현을 사용하면 여러개의 문자열을 변경할 수 있습니다.

{}
    const str1 = "javascrpt reference";
    const cirrentStr1 = str1.replace("javascrpt", "자바스크립트");      //자바스크립트 reference
    const cirrentStr2 = str1.replace("j", "J");                        //Javascrpt reference
    const cirrentStr3 = str1.replace("e", "E");                        //javascrpt rEference    (첫번째 e만 바뀜)
    const cirrentStr4 = str1.replaceAll("e", "E");                     //javascrpt rEfErEncE    (replaceAll은 해당되는게 다 바뀜)
    const cirrentStr5 = str1.replace(/e/g, "E");                       //javascrpt rEfErEncE    (정규식을 이용해도 한번에 다 바꿀 수 있다.)
    const cirrentStr6 = str1.replace(/e/gi, "E");                      //javascrpt rEfErEncE    (gi는 소문자 대문자 구별 않고 전부 선택하는 정규식 표현법)

    const str2 = "https://www.naver.com/img01.jpg";

    const cirrentStr7 = str2.replace("img01.jpg", "img02.jpg");        //https://www.naver.com/img02.jpg    (이미지 주소 변경법)
    
    const str3 = "010-2000-1000";
    
    const cirrentStr8 = str3.replaceAll("-", "");                      //0102000-1000
    const cirrentStr9 = str3.replaceAll("-", "");                      //01020001000
    const cirrentStr10 = str3.replace(/-/g, "");                       //01020001000
    const cirrentStr11 = str3.replace(/-/g, " ");                      //010 2000 1000
    const cirrentStr12 = str3.replace(/-/g, "*");                      //010*2000*1000
    const cirrentStr13 = str3.replace(/[1-2]/g, "*");                  //0*0-*000-*000
}

'Javascript' 카테고리의 다른 글

padStart( )/padEnd( )  (2) 2022.08.18
concat( )/repeat( )  (1) 2022.08.18
정규표현식  (4) 2022.08.16
indexOf( )  (4) 2022.08.16
slice( )/substring( )/substr( )  (4) 2022.08.16

댓글


광고 준비중입니다.