Javascript 특수문자 공백 제거 - javascript teugsumunja gongbaeg jegeo

Question

자바스크립트는 RexEx 정규식을 사용해서 불필요한 문자를 제거할 수 있습니다
정규식은 /[정규식으로 제거할 패턴]/gim 방식으로 선언합니다
gim (replaceAll) : 전역적으로 문자열에 포함된 같은 패턴의 문자를 모두 제거하기 위해서 사용합니다
replace 를 사용해서 특정 패턴 문자 인 경우 해당 문자를 삭제합니다

목차 Show

정규식 패턴
정규식 예제
정규 표현식을 사용하여 특정 문자 제거(공백 제거, 특정 문자 치환)

정규식 패턴

[a-z] : 영어 소문자 지정
[A-Z] : 영어 대문자 지정
[ㄱ-ㅎㅏ-ㅣ가-힣] : 한글 지정
[.,!?] : 허용하고자하는 특수문자 지정

정규식 예제



let reg = /[0-9 ]/gim;


let reg = /[a-zA-Z ]/gim;


let reg = /[`~!@#$%^&*()_|+\-=?;:'",.<>\{\}\[\]\\\/ ]/gim;


let reg = /[`~!@#$%^&*()_|+\-=?;:'",.<>\{\}\[\]\\\/]/gim;


let reg = /[`~!@#$%^&*()_|+\-=?;:'"<>\{\}\[\]\\\/ ]/gim;


let resultData = originalData.replace(reg, "");

정규 표현식을 사용하여 특정 문자 제거(공백 제거, 특정 문자 치환)

원래 자바스크립트에서는 자바와 다르게 String.replace() 함수는 처음 한 문자만 치환해줌

str = str.replace(0, "");

하지만, 정규표현식을 사용하면

str = str.replace(/0/gi, "");

모든 0을 ""로 치환할 수 있음

자바와 다르게 replaceAll() 함수도 없음

[개발 환경 설정]

개발 툴 : Edit++

개발 언어 : javascript

[소스코드]

    <!-- 내부 JS 지정 : 일반 -->
    <script>

        /*
        [JS 요약 설명]
        1. window.onload : 브라우저 로드 완료 상태를 나타냅니다
        2. 자바스크립트는 RexEx 정규식을 사용해서 불필요한 문자를 제거할 수 있습니다
        3. 정규식은 검색 패턴 을 형성하는 일련의 문자입니다
        4. 정규식은 /[정규식으로 제거할 패턴]/gim 방식으로 선언합니다
        5. gim (replaceAll) : 전역적으로 문자열에 포함된 같은 패턴의 문자를 모두 제거하기 위해서 사용합니다
        6. 정규식 패턴 [a-z] : 영어 소문자 지정
        7. 정규식 패턴 [A-Z] : 영어 대문자 지정
        8. 정규식 패턴 [ㄱ-ㅎㅏ-ㅣ가-힣] : 한글 지정
        9. 정규식 패턴 [.,!?] : 허용하고자하는 특수문자 지정
        10. replace 를 사용해서 특정 패턴 문자 인 경우 해당 문자를 삭제합니다
        */


        /* [html 최초 로드 및 이벤트 상시 대기 실시] */
        window.onload = function() {
            console.log("");
            console.log("[window ready] : [start]");
            console.log("");

            // 초기 변수 선언 실시
            var str = "AdmiN, **{}! 1234.안녕";

            // 특수문자 제거 이벤트 함수 호출 
            removeSpecialData(str);

            // 숫자 제거 이벤트 함수 호출 
            removeNumberData(str);

            // 영어 제거 이벤트 함수 호출 
            removeEngData(str);
        };


        /* [특수 문자 제거 이벤트 수행 부분] */                       
        function removeSpecialData(originalData) {
            console.log("");
            console.log("[removeSpecialData] : [start]");
            console.log("[originalData] : " + originalData);
            console.log(""); 

            // [1] 정규식 형태 선언 실시 (특수문자, 괄호, 점, 공백 모두 제거 실시)
            var reg = /[`~!@#$%^&*()_|+\-=?;:'",.<>\{\}\[\]\\\/ ]/gim;


            // [2] 정규식 형태 선언 실시 (특수문자, 괄호, 점 모두 제거 실시 - 공백은 제거 안함)
            //var reg = /[`~!@#$%^&*()_|+\-=?;:'",.<>\{\}\[\]\\\/]/gim;


            // [3] 정규식 형태 선언 실시 (특수문자, 괄호, 공백 모두 제거 실시 - 점은 제거 안함)
            //var reg = /[`~!@#$%^&*()_|+\-=?;:'"<>\{\}\[\]\\\/ ]/gim;

            // 특수문자가 제거된 값을 담을 변수 선언 실시
            var resultData = originalData.replace(reg, "");

            console.log("");
            console.log("[removeSpecialData] : [특수문자 및 공백제거]");
            console.log("[removeData] : " + resultData);
            console.log("");                         
        };



        /* [숫자 제거 이벤트 수행 부분] */                       
        function removeNumberData(originalData) {
            console.log("");
            console.log("[removeNumberData] : [start]");
            console.log("[originalData] : " + originalData);
            console.log(""); 

            // 정규식 형태 선언 실시 (숫자, 공백 모두 제거 실시)
            var reg = /[0-9 ]/gim;

            // 특수문자가 제거된 값을 담을 변수 선언 실시
            var resultData = originalData.replace(reg, "");

            console.log("");
            console.log("[removeNumberData] : [숫자 및 공백 제거]");
            console.log("[removeData] : " + resultData);
            console.log("");                         
        };  




        /* [영어 제거 이벤트 수행 부분] */                       
        function removeEngData(originalData) {
            console.log("");
            console.log("[removeEngData] : [start]");
            console.log("[originalData] : " + originalData);
            console.log(""); 

            // 정규식 형태 선언 실시 (영어(소문자, 대문자), 공백 모두 제거 실시)
            var reg = /[a-zA-Z ]/gim;

            // 특수문자가 제거된 값을 담을 변수 선언 실시
            var resultData = originalData.replace(reg, "");

            console.log("");
            console.log("[removeEngData] : [영어 및 공백 제거]");
            console.log("[removeData] : " + resultData);
            console.log("");                         
        };
                
    </script>

[결과 출력]

[요약 설명]

/*

[JS 요약 설명]

1. window.onload : 브라우저 로드 완료 상태를 나타냅니다

2. 자바스크립트는 RexEx 정규식을 사용해서 불필요한 문자를 제거할 수 있습니다

3. 정규식은 검색 패턴 을 형성하는 일련의 문자입니다

4. 정규식은 /[정규식으로 제거할 패턴]/gim 방식으로 선언합니다

5. gim (replaceAll) : 전역적으로 문자열에 포함된 같은 패턴의 문자를 모두 제거하기 위해서 사용합니다

6. 정규식 패턴 [a-z] : 영어 소문자 지정

7. 정규식 패턴 [A-Z] : 영어 대문자 지정

8. 정규식 패턴 [ㄱ-ㅎㅏ-ㅣ가-힣] : 한글 지정