자바스크립트의 trim 함수는 문자열 끝에 공백을 제거해 주는 기능을 합니다. 그런데 문자열의 앞에 있는 공백만 제거하거나 뒤쪽에 있는 공백만 제거할 수 있는 기능은 직접 구현을 해야 합니다. 정규표현식을 사용해서 ltrim() 과 rtrim() 함수를 만들어 보겠습니다.
| ◎ String 의 trim 함수 |
▼ 일반적인 String 클래스의 양쪽 공백제거 함수 입니다. 왼쪽 오른쪽 모두 공백을 제거하고 싶다면 이 함수를 사용하시면 됩니다.
<!DOCTYPE HTML> <html> <head> <meta charset="euc-kr"> <title>Javascript</title> <style type="text/css"> body {background-color: #e7e7e7;} div {margin : 10px;} </style> <script type="text/javascript"> <!-- var a = " javascript "; document.write(a.trim()); //--> </script> </head> <body> </body> </html>
| ◎ 정규식을 이용해 ltrim, rtrim 함수 구현 |
▼ 아래에 쓰인 정규식 특수문자에 대해 간략하게 설명하겠습니다. 샘플에서 나와 있는 왼쪽 공백 제거 식은 ^\s+ 입니다. “처음시작에 공백이 하나이상” 있는 것을 말합니다. 오른쪽 공백 제거 식은 \s+$ “끝라인에 공백이 하나이상” 있는 것을 말합니다.
l ^ - 처음시작(beginning of line)
l \s - 공백(whitespace character)
l $ - 끝라인(end of line)
l | - or 표현
l \ - 특수문자를 원래의 문자 의미대로 해석
l + - 자기앞에 나오는 하나 이상의 정규표현식과 일치
<!DOCTYPE HTML> <html> <head> <meta charset="euc-kr"> <title>Javascript</title> <style type="text/css"> body {background-color: #e7e7e7;} div {margin : 10px;} </style> <script type="text/javascript"> <!-- var a = " javascript "; alert(ltrim(a)); alert(rtrim(a)); // 왼쪽에 있는 공백을 제거한다. function ltrim(value) { return value.replace(/^\s+/,""); } // 오른쪽에 있는 공백을 제거한다. function rtrim(value) { return value.replace(/\s+$/,""); } //--> </script> </head> <body> </body> </html>
| ◎ substring 을 이용해서 ltrim, rtrim 구현하기 |
▼ 이번에는 정규식이 아닌 charAt 과 substring 함수로 공백을 제거하는 소스입니다. 이 로직은 문자열을 한자씩 분리해서 charAt() 함수로 공백인지 아닌지 판단합니다. 공백이면 다음 문자도 연속해서 공백인지 for 문을 돌로 아니라면 길이를 j 변수에 저장합니다. j 변수에 저장된 길이 값으로 substring() 함수를 이용해 공백을 제외한 나머지를 자르는 것이죠.
<!DOCTYPE HTML> <html> <head> <meta charset="euc-kr"> <title>Javascript</title> <style type="text/css"> body {background-color: #e7e7e7;} div {margin: 10px;} </style> <script type="text/javascript"> <!-- var a = " javascript "; alert(ltrim(a)); alert(rtrim(a)); // 왼쪽에 있는 공백을 제거한다. function ltrim(value) { var i, j = 0; var objstr; for (i = 0; i < value.length; i++) { if (value.charAt(i) == ' ') j = j + 1; else break; } return value.substring(j, value.length - j + 1); } // 오른쪽에 있는 공백을 제거한다. function rtrim(value) { var i, j = 0; for (i = value.length - 1; i >= 0; i--) { if (value.charAt(i) == ' ') j = j + 1; else break; } return value.substring(0, value.length - j); } //--> </script> </head> <body> </body> </html>
'웹 프로그래밍 > 자바스크립트' 카테고리의 다른 글
| 자바스크립트 정규식 표현으로 이름 유효성 검사하기 (1) | 2023.10.19 |
|---|---|
| 자바스크립트 내장함수 eval() 문자열을 수식으로 바꾸는 방법 (1) | 2023.10.11 |
| 자바스크립트 내장 객체 Array 의 concat 함수 알아보기 – 2회 (0) | 2023.10.11 |
| 자바스크립트 parseFloat 함수 이용해서 문자열을 실수로 변환하기 (0) | 2023.10.11 |
| 자바스크립트 배열 Array 초기화 하는 다양한 방법 (0) | 2023.10.10 |
| 자바스크립트(Javascript) display 속성 이용해서 접거나 펴는 방법 (1) | 2023.09.22 |
| 자바스크립트(Javascript) form 의 submit (전송)을 자바스크립트로 실행하는 방법 (1) | 2023.09.22 |
| 자바스크립트 크롬 브라우저로 디버깅 하는 방법 (0) | 2022.08.17 |
녹두장군1님의
글이 좋았다면 응원을 보내주세요!
