'정규표현식'에 해당되는 글 4건

HTML input 필드에 표기되는 숫자를 평상시에는 금액 표기법으로 콤마 ( , ) 를 추가 하도록 하고 포커싱이 되어 수정 모드가 되었을 때는 콤마( , )를 제거하여 숫자만 입력 하는 모드로 변경하는 방법에 대해 알아 보겠습니다. 

위와 같이 동작하도록 해보겠습니다. 

위 input 필드에 직접 숫자 입력 후 포커스를 다른 곳으로 이동 시키면 금액 표기법과 같이 세자리마다 콤마 ( , ) 찍혀 나옵니다. 

▼ HTML body 부 

input 필드 id 를 inputPrice 로 지정 했습니다. 

이 input 필드가 focus 되거나 blur 되는 순간에 콤마( , )를 추가 하거나 빼주는 작업을 합니다. 

▼ jQuery 코드 

$('#inputPrice').on('focus', function(){

...

});

위 코드는 id 값이 inputPrice 인 요소가 focus 되면 어떠한 동작을 하겠다는 jQuery 코드 입니다. 

var val = $('#inputPrice').val();

inputPrice 필드의 value 값을 가져와서 val 이라는 변수에 담아 줍니다. 

이 값이 공백문자거나 null 이 아니라면 (공백문자 여부 조회 코드는 아래 첨부하는 전체 소스 참조하세요)

val = val.replace(/,/g, '');

inputPrcie 필드의 value 값에서 콤마 ( , ) 를 제거 하여 공백으로 변환합니다. 

$('#inputPrice').val(val);

콤마를 제거한 val 값을 inputPrice 의 value 값으로 지정합니다. 

이렇게 하면 input 필드가 focus 된 경우에대한 처리가 끝납니다. 

$('#inputPrice').on('blur', function(){

...

});

위 코드는 id 값이 inputPrice 인 요소가 blur (포커스를 잃은 경우) 어떠한 동작을 하겠다는 것을 정의하는 jQuery 코드 입니다. 

var val = $('#inputPrice').val();

inputPrice 필드의 value 값을 가져와서 val 이라는 변수에 담아 줍니다. 

if(!isEmpty(val) && isNumeric(val)){  ...  }

이 값이 공백문자거나 null 이 아니고 숫자라는 조건을 만족 하는 경우 

val = currencyFormatter(val);

currencyFormatter 라는 함수에 val 값을넣어 숫자를 금액 포맷으로 변경하여 리턴 합니다. 

$('#inputPrice').val(val);

금액 포맷으로 리턴된 값을 input 필드의 value 값으로 지정하여 필요한 작업을 완료 합니다. 

위 코드는 입력 받은 값의 공백문자 여부 및 null 값 여부를 체크후 boolean 값으로 리턴하는 코드입니다. 

위 코드는 입력 받은 값을 정규표현식을 이용하여 숫자 값 여부를 체크 하여 결과를 boolean 값으로 리턴 하는 코드 입니다. 

자바스크립트에서는 test() 함수를 이용하여 정규표현식과 일치 하는 문자가 있는지 여부를 확인 및 결과를 true / false 로 리턴 합니다. 

입력 받은 값을 뒤에서 세자리 마다 콤마( , ) 를 추가하는 정규표현식을 활용한 코드 입니다. 

정규 표현식 관련 내용은 java 에서 다뤘으니 참조 하세요.

▶ 정규표현식 관련 포스팅 보러가기(클릭)

전체 코드 (참고하세요)

test.jsp

▼ 도움이 되셨다면 로그인이 필요 없는 ▼

▼ 하트 클릭 한번 부탁 드립니다 ▼

감사합니다 :D

안녕하세요. 제임스 입니다. 

자바 정규표현식에서 한글만 허용하는 방법에 대해 정리해보겠습니다. 

■ 정규표현식 한글만 허용하기

위 표현식은 가 ~ 힣 까지의 한글을 허용 한다는 표현식입니다. 

뒤에 * 을 붙여서 입력이 안되어도 한글입력으로 인정합니다. 

샘플 코드 보시겠습니다. 

문자열이 "가" ~ "힣" 범위 안에 들어 가는 한글들로 구성 되어 있습니다. 

위 코드 실행 결과는 아래와 같습니다. 

input1 정규표현식 적용 결과 ==> true

입력값이 없는 상태라도 한글로 인정 됩니다. 표현식에 보시면 * 을 추가 했는데요. 앞의 표현식이 입력되지 않아도 허용 한다는 의미 입니다. 

위 코드 실행 결과는 아래와 같습니다. 

input2 정규표현식 적용 결과 ==> true

문자열에 공백이 추가 되었습니다. 정규표현식 상에서 공백을 허용하겠다는 내용이 없으므로 위 코드 실행 결과는 false 가 리턴 되어야 정상입니다. 

위 코드 실행 결과는 아래와 같습니다. 

input3 정규표현식 적용 결과 ==> false

■ 정규표현식 한글만 허용하기 (공백문자 허용)

그렇다면 공백을 허용 하고자 한다면 어떻게 해야 할까요? 

표현식으로 작성한 부분은 다음과 같습니다.

^[가~힣]*$

가 ~ 힣 까지 모두 허용 하는데 여기에 공백문자도 허용하겠다고 선언 하면 됩니다. 

위와같이 \\s 를 추가 해줬습니다. \s 는 공백문자 허용 한다는 내용입니다. 

결과는 어떻게 나올까요? 당연히 true 로 리턴 됩니다. 

input3 정규표현식 적용 결과 ==> true

■ 정규표현식 한글만 허용하기 (자음&모음 허용)

이번에는 자음과 모음이 문자열에 포함되었습니다. 작성한 표현식 상에 자음 / 모음에 관한 정의를 하지 않았다는 것을 생각하면 실행 결과는 예상 가능하시죠? 

input4 정규표현식 적용 결과 ==> false

자음과 모음도 허용하는 표현식을 만들어 보겠습니다. 

자음 ㄱ-ㅎ 추가 후 or 을 의미하는 " | " 값으로 구분합니다.

모음 ㅏ-ㅣ 추가 후 or 을 의미하는 " | " 값으로 구분합니다.

그리고 기존 표현식을 추가 해주면 자음, 모음을 포함한 한글 허용하기 표현식이 됩니다. 

실행 결과는 아래와 같습니다. 

input4 정규표현식 적용 결과 ==> true

상황에 따라 한글만 허용하더라도 자음/모음은 허용 하지 않거나 허용 해야 하는 경우가 다르게 나옵니다. 

상황에 맞게 표현식을 수정해가면 멋진 코딩을 할 수 있을 거라 생각됩니다. 

▼ 도움이 되셨다면 로그인이 필요 없는 ▼

▼ 하트 클릭 한번 부탁 드립니다 ▼

감사합니다 :D

안녕하세요. 제임스 입니다. 

이번 포스팅에서는 정규표현식으로 영문자만 허용하는 방법에 대해 정리 하겠습니다. 

■ 정규표현식 영문자만 허용하기 (대소문자 구분없이 모두 허용)

위 표현식을 정리 하면 아래와 같습니다.

^[a-zA-Z]*$

^ => 문자열 시작

a-z => 소문자 a ~ z 까지 허용

A-Z => 대문자 A ~ Z 까지 허용

* => 앞에 문자가 없거나 무한대로 많이 있을 수 있음 

$ => 문자열 종료

즉, 대소 문자 구분없이 영문자 모두를 허용하며 빈값도 허용한다는 표현식 입니다. 

testStr1 은 대소문자 같이 포함한 문자열입니다. 

testStr2 는 소문자만 포함한 문자열

testStr3 은 대문자만 포함한 문자열

testStr4 는 소문자만 포함한 문자열이지만 띄어쓰기를 했습니다. 

testStr5 는 대문자만 포함한 문자열이지만 역시 띄어쓰기를 했습니다. 

testStr6 은 빈값으로 설정 했습니다. 

각각의 변수를 String 객체의 matches 함수를 이용하여 결과값을 찍어 봤습니다. 

결과는 아래와 같습니다. 

testStr1 ==> true

testStr2 ==> true

testStr3 ==> true

testStr4 ==> false

testStr5 ==> false

testStr6 ==> true

4, 5번의 경우 문자열에 띄어쓰기가 포함되어 있어 false 가 리턴 되었습니다. 

6번은 아무 값도 없는 상태 이기 때문에 true 가 리턴 되었습니다. 만약 6번이 띄어쓰기만 있었다면 역시 false 가 리턴 됩니다. 

■ 정규표현식 영문자 대문자만 or 소문자만 허용하기 

위 표현식과 같이 a-z 만 추가 하면 소문자만 인정하는 표현식이 됩니다. 

소문자를 대문자로 변경 하기만 하면 대문자만 인정하는 표현식이 됩니다. 

간단하죠? ^^

영문자 관련 정규표현식은 많이 사용하는 것이니 잘 기억해두시고 사용하시면 좋을거예요 ^^

▼ 도움이 되셨다면 로그인이 필요 없는 ▼

▼ 하트 클릭 한번 부탁 드립니다 ▼

감사합니다 :D

안녕하세요. 제임스 입니다. 

앞서 정규표현식 (Regular Expression) 에 대해 간단히 정리 했었습니다. 

이번에는 정규표현식 중 숫자만 허용 하는 표현식을 알아 보겠습니다. 

■ 정규표현식 숫자만 허용하기

위와 같이 정규표현식을 작성 했습니다. 

^ => 문자열의 시작

[...] => 문자의 집합, 두 문자 사이에 - 기호를 이용하여 범위를 지정 [0-9] 와 같이 입력하여 0 ~ 9 를 표현 

+ => 앞에 문자가 최소 한개이상 있음, 여기서는 0 ~ 9 사이의 숫자의 갯수 제한이 없음을 의미

$ => 문자열 종료 

다시 정리 하면 아래와 같습니다. 

^[0-9]+$

문자열 시작 

[0 ~ 9 까지 숫자 인정] 

0 ~ 9 까지 숫자 갯수 제한 없음

문자열 종료

위 표현식이 정말 숫자만 허용 하는지 확인 해보겠습니다. 

testStr1 이라는 변수에 숫자만 1 ~ 5 까지 나열 되어 있습니다. 

그냥 봐도 숫자만 입력 된 것이 맞죠? ^^

결과는 아래와 같습니다. 

testStr1 ==> 숫자만 입력 됨

testStr2 이라는 변수에는 숫자와 문자의 조합인 값이 들어 있습니다. 

결과는 아래와 같습니다.

testStr2 ==> 숫자 외 다른 문자도 입력 됨

testStr3 이라는 변수는 빈 값으로 설정 했습니다. 

결과는 아래와 같습니다.

testStr3 ==> 숫자 외 다른 문자도 입력 됨

■ 정규표현식 숫자와 공백 허용하기

위 세번째 예제를 사용한 이유는 숫자만 허용하는 표현식을 많이 사용 하기도 하지만 더 많이 사용 하는 것이 숫자와 빈값을 인정하는 표현식을 더 많이 사용하기 때문입니다. 

앞선 숫자만 허용하는 표현식에서는 + 라는 표현식을 이용하여 선행 문자의 갯수를 1개 이상으로 지정 했었습니다. 하지만 이 표현식을 * 로 변경할 경우 선행 문자의 갯수가 0개 이상으로 지정 할 수 있습니다. 

예제를 보시겠습니다. 

regExp2 변수는 0 ~ 9 사이의 숫자가 0개 이상인 것으로 지정 했습니다. 

결과는 아래와 같습니다. 

testStr4 ==> 숫자만 입력 됨

▼ 도움이 되셨다면 로그인이 필요 없는 ▼

▼ 하트 클릭 한번 부탁 드립니다 ▼

감사합니다 :D