Onkeyup 정규식 - Onkeyup jeong-gyusig

해결

올리고 주문을 진행하면서 정규표현식을 적용한 사례입니다.
태그로는 textarea로 진행하겠습니다.

--- html : onkeyup 사용

<textarea id="customSeq" name="customSeq[]" onkeyup="fnSeqKeyUp(this)"></textarea>

--- CSS : 입력된 값 대문자변경

textarea{ text-transform : uppercase;" }

--- JS : onkeyup에 매칭되는 메서드

function fnSeqKeyUp(data){ var str = $(data).val(); var patten = /^[ABCDGHKMNRSTVWY]*$/gi; var convertPatten = /[^(ABCDGHKMNRSTVWY)]/gi; var test = patten.test(str); if(test!=true){ var convertStr = str.replace(convertPatten,''); $(data).val(convertStr); } }

• str : 입력된 문자열
• patten : [ ] 범위안에 속해있지 않는 모든 값들을 매칭 / 모든 항목(g)이며 대소구문x(i)
• convertPatten
  plag는 모든 항목(g)이며 대소구문x(i)
  test결과 속해있는 영문이 아니면 모두 매칭되는 것을 볼 수 있다.
  ( (, )를 제외해도 되는 것을 확인 )
  

patten.test(str)를 이용하여 true, false으로 분기시킵니다.
해당 패턴은 " 만약 [ ]에 속하지 않은 항목이 하나라도 있다면 매칭이 안된다" 입니다.
만약 str 문자열에 패턴에 해당되는 것이 속해있다면 if문을 거치게됩니다.

거친다면, var convertStr = str.replace(convertPatten,'')로
해당 패턴은 " 모든 항목에 대해서 [ ]안에 속해있지 않는 것에 대해 매칭 " 입니다.
convertPatten 패턴에 매칭되는 모든 문자열을 ''으로 치환시켜줍니다.

결과

Oligo : span으로 형성되어 .text()로 값을 변경시켜줄 수 밖에 없었습니다.
성질을 추측해본 결과 다시그려주는 것으로 마우스 커서에 불안감이 있습니다.

Custom : textarea로 형성되어 .val()로 값을 변경시켜줄 수 있습니다.커서 위치도 정상적으로 동작하였습니다.

정규표현식

정규표현식을 JS에서 어떻게 적용하냐면,

• str.match(정규표현식) 정규표현식에 해당하는 문자 여부 찾기
• str.replace(정규표현식, '교체할 문구') 정규표현식에 해당하는 문자 교체
• str.search(정규표현식) 정규표현식에 해당하는 문자가 몇 번째 index에 있는지 찾기

문법

var patten = /[^a-z]/gi;

/ 정규표현식 문법 / 플래그로 구성되어 있습니다.

플래그

플래그의 역할에는 다음과 같습니다.

• /g (global) 둘 이상의 일치 항목을 찾음
• /i (insensitive) 대소문자 구분 없이 찾음
• /m (multi-line) 주어진 문자열에 줄바꿈이 있을 경우, 여러 줄로 취급하여 찾음
• /gi 둘 이상의 일치 항목을 대소문자 구분 없이 찾음

규칙

• [ ] 속해있는 것 하나라도 존재하면 매칭,[abc][a-z][0-9] 등, a|b|c
• [^] 해당 조건 문자 제외하고 매칭, [^abc]는 a와 b와 c를 모두 제외함
• ? 앞 문자가 있을 수도 없을 수도 있다
• ^ $ 문자열 처음과 끝을 의미, /m(멀티라인)과 같이 써야함, /^ $/m
• + 앞 문자가 1개 이상 있어야 매칭, a1 a12 a 에서는 a는 매칭이 안됨
• * 앞 문자가 0개 이상 있으면 매칭, a1 a12 a 에서 a도 매칭이 됨
• {n}, {n, } 앞 문자가 n개 이상 있음
• {n,m} 앞 문자가 n개 이상 m개 이하
• ( ) 캡쳐 그룹을 생성하는 용도, a(bc)*인 경우 a 그리고 0개 이상의 bc를 포함한 문자열과 매칭

참고사이트

onKeydown(KeyCode 값) : 사용자가 키보드의 키를 눌렀을 때
onKeyup(keyCode 값) : 사용자가 키보드의 키를 눌렀다가 땠을 때
onKeyPress(ASCII 값) : 사용자가 키보드의 키를 눌렀을 때

[HTML] onkeypress, onkeyup, onkeydown 사용법

onKeydown(KeyCode 값) : 사용자가 키보드의 키를 눌렀을 때 onKeyup(KeyCode 값) : 사용자가 키보드의 키를 눌렀다가 땠을 때 onKeyPress(ASCII 값) : 사용자가 키보드의 키를 눌렀을 때 정확히 어떤 경우에 발생

crivius.tistory.com

Inputbox Validtion Numbers Only

자바스크립트 방법 중 가장 많이 쓰이는 방법 중 하나가 input 텍스트 박스 내에 숫자만 입력하게 하는 방법이다.

다양한 개발 방법 중 자바스크립트 이용하는 방법과 정규식의 인라인으로 작성하는 방법을 알아보자.

1. 정규식 이용한 방법

<input type="text" onKeyup="this.value=this.value.replace(/[^0-9]/g,'');"/>

이렇게 onKeyup 속성을 넣어서 정규식을 입력하면 숫자외에 입력이 되지않는다.

2. 자바스크립트 이용한 방법

<input type="text" onkeypress="inNumber();"/> <!--자바스크립트를 불러오는 속성입력--> function inNumber(){ if(event.keyCode<48 || event.keyCode>57){ event.returnValue=false; } }

자바스크립트로 키보드 누르는 키를 제어함으로써 숫자만 입력가능하도록 할 수 있다.

(일부 오류가 있어 onlynumber 함수를 추가하였습니다. 2021년 5월 11일)

안녕하세요. 오늘은 정규식에서 input창에 숫자만 적히면서 콤마를 붙일수도, 안 붙일수도 있는 정규식을 이야기해보겠습니다. 

JQUERY

우선 자바스크립트에 함수를 4개 만들어줍니다.

콤마붙이는 함수 / function comma(str)

콤마를 때는 함수 / function uncomma(str) 

숫자만 사용할 수 있는 함수 (+콤마) / function inputNumberFormat(obj)

숫자만 사용할 수 있는 함수 (콤마 X) / function inputOnlyNumberFormat(obj)

<script type="text/javascript"> function comma(str) { str = String(str); return str.replace(/(\d)(?=(?:\d{3})+(?!\d))/g, '$1,'); } function uncomma(str) { str = String(str); return str.replace(/[^\d]+/g, ''); } function inputNumberFormat(obj) { obj.value = comma(uncomma(obj.value)); } function inputOnlyNumberFormat(obj) { obj.value = onlynumber(uncomma(obj.value)); } function onlynumber(str) { str = String(str); return str.replace(/(\d)(?=(?:\d{3})+(?!\d))/g,'$1'); } </script>

HTML

그리고 HTML에서 input칸에 속성을 넣어줍니다.

아무래도 숫자를 쓰는 칸이기에 무한대로 쓰고 submit을 하면 에러가 나기 십상입니다.

이럴땐 maxlength를 사용하여 입력되는 숫자를 제한시켜줍니다.

그리고 가장 중요한 함수 사용되는 칸은 

onkeyup을 이용하여 함수이름을 쓰고 this값을 넣어줘서 입력값을 함수에 적용시킵니다.

<input type="text" maxlength="10" onkeyup="inputNumberFormat(this);" />

글자는 안써지면서 숫자에 콤마가 붙는....대략 이런식으로 나오겠죠. 

각 상황에 따라 기호에 맞게 사용하시면 됩니다~~~