[jQuery] input/textarea 공백 입력 방지 및 입력된 공백 제거

사용자가 textarea에 입력한 값을 전달받아 DB에 저장하는 경우

빈값 / 공백(스페이스키 입력) / 공백(특수문자) / 엔터 / 탭을 체크하고,

문자열 양쪽의 공백을 제거하는 방법.

 

---

공백 입력 방지

 

replace와 정규표현식 사용

// text라는 id를 가진 요소의 값
var text = $("#text").val();
	
  // 미입력 또는 공백 입력 방지
  if (text.replace(/\s|　/gi, "").length == 0) {
    alert("내용을 입력해주세요.");
    $("#text").focus();
  }

 

replace()의 사용법

// text 문자열 내의 모든 A를 B로 바꾸기
text.replace("A", "B")

 

사용된 정규표현식

표현식	의미
/	정규표현식의 시작
\s	공백 또는 탭
|	or
g	문자열의 모든 문자 검색
i	대소문자 무시

 

문자열의 모든 문자를 대소문자를 무시하고 검색하되,

문자열 내의 모든 공백을 제거(""로 대체)했을 때의 텍스트 길이가 0이라면,

공백 외의 내용이 없다는 것.

다시 말해 아무것도 입력되지 않았거나 육안으로 보기에 빈 내용만 입력된 경우임.

 

 

 

---

문자열 양쪽의 공백 제거

 

trim 사용

var apple = "        Hello          ";
var tomato = $.trim(apple);

 

결과값

Hello

 

공백제거를 자바스크립트단에서 하기가 곤란할 경우,

SQL 쿼리문의 TRIM("문자열")로도 할 수 있다.

 

 

---

참고사이트

 

1. 정규식으로 간단하게 빈 내용(공백, 엔터, 탭) 입력 체크하기

http://superkts.pe.kr/helper/view.php?seq=V&seq=200

 

2. jQuery trim 함수

https://roqkffhwk.tistory.com/29

 

3. 정규표현식 돌려보기

https://regexr.com/