개발 도구 (Development Tools)/JavaScript

[JavaScript] 공백을 체크하는 방법

BiCute 2022. 12. 5. 08:00
반응형

 

댓글, 게시물 작성 또는 다양한 인풋 창에서 해당 내용이 비어있는지 또는 스페이스만 입력해서 내용이 없는 공백만 입력되어있는 것들을 확인하고 제거하는 방법입니다.

 

 

# 내가 원하는 결과

대충 아래와 같은 위지윅(WYSWYG)을 이용해 게시물을 작성한다고 했을때 제목과 내용이 비어있는 경우엔 글을 저장할 수 없게 하고 싶다.

 

 

1단계. JavaScript

  제목의 문자열이 title에 저장된다고 가정했을 경우

  입력된 내용이 있다면 문자열의 길이(length)가 0보다 길어지기 때문에 다음과 같은 방법으로 해결이 가능하다.

if(!(this.title.length > 0)) {  // title의 길이가 0보다 크지 않다면!
    alert(‘제목을 입력해 주세요’);
    return
}

 

 

sample.

// 이런식으로 제목에 12345를 입력하고 길이를 출력해보면
console.log("제목 => ", this.title)
console.log("제목 길이 => ", this.title.length)

// 아래와 같은 결과를 받을 수 있다.
제목 =>  12345
제목 길이 =>  5

 

 

 

하지만 이 방법은 문제점이 있는데...

사용자가 스페이스바를 입력하더라도 공백 또한 제목의 길이로 들어간다는 것이다.

즉 실질적인 내용은 없지만 length가 0보다 크기 때문에 조건문에서 true가 되어 통과되 버린다.

 

sample.

console.log("제목 => ", this.title)
console.log("제목 길이 => ", this.title.length)

// space를 5번 누른 후 저장할경우 
제목 =>       
제목 길이 =>  5

 

 

 

2단계. trim()

  trim() 메서드를 사용한다.

  trim() 메서드는 문자열의 양쪽 끝의 공백을 제거한 후, 원래 문자열을 수정하지 않고 새로운 문자열을 반환해 줍니다.

this.title = this.title.trim();  // title에 trim()메서드를 사용한 값을 다시 대입

// trim() 사용 전 title
제목 =>       
제목 길이 =>  5

// trim() 사용 후 title
trim 후 제목 =>  
trim 후 제목 길이 =>  0

 

이제 공백을 구분할 수 있게 되었으니, trim()메서드로 공백을 제거한 후, 다시 1단계처럼 title의 길이를 측정하여 조건을 주면 공백을 입력하는 문제도 해결이 됩니다.

 

 

 

3단계. 정규식

일반적인 입력값만 받는다면 위 단계만으로도 어느정도 해결이 다 되겠지만,

이 글에서 예를 들고 있는 본문의 경우 처음 샘플 이미지를 보면 텍스트만 입력하는것이 아닌, 블로그처럼 글자의 굵기를 조절하거나 크기를 조절하는 등 다양한 입력이 가능한 HTML 에디터를 사용하고 있습니다.

 

이러한 에디터를 사용하게되면 HTML 태그가 함께 값으로 들어오게 되는데 공백만 입력하더라도 대충 아래와 같은 형식으로 나타납니다.

// 본문을 HTML로 찍어보면
console.log(this.contentHTML)

// HTML태그가 기본적으로 들어가 있음
<p></p>


// 공백 5개 입력후 console로 출력
console.log("본문 => ", this.contentHTML)
console.log("본문 길이 =>", this.contentHTML.length)

// 결과값
본문 =>  <p>             </p>
본문 길이 => 20

 

양쪽에 <p> 태그가 자리잡고 있어 trim()으로도 제거할 수 없고, 그러다보니 문자열의 길이 또한 항상 0 보다 큰 상태입니다.

그렇다면? HTML을 제거해서 확인하면 되겠군요.

 

 

아래와 같은 방법으로 정규식을 사용해서 태그를 제거해 줍니다.

let regex = /<(\/)?([a-zA-Z]*)(\s[a-zA-Z]*=[^>]*)?(\s)*(\/)?>/g
this.contentHTML = this.contentHTML.replace(regex,"");

// console.log 출력
console.log("정규식 적용 후 => ", this.contentHTML)

// 기존
본문 =>  <p>             </p>
본문 길이 => 20

// 정규식 적용 후
정규식 적용 후 =>       // 공백은 남아있는 상태

 

 

아직 공백이 남아있어 문자열의 길이는 있는 상태지만 첫번쨰 목적인 태그를 제거하는것은 성공했습니다.

이제 공백을 제거해주면 되는데 이건 2단계에서 이미 했었네요.

trim() 메서드를 다시 사용한 후 문자열의 길이를 측정하면 됩니다.

// 전체 순서
let regex = /<(\/)?([a-zA-Z]*)(\s[a-zA-Z]*=[^>]*)?(\s)*(\/)?>/g  // 적용할 정규식 정의
this.contentHTML = this.contentHTML.replace(regex,"");  // 정규식 적용

console.log("정규식 적용 후 => ", this.contentHTML)
console.log("정규식 적용 후 길이 => ", this.contentHTML.length)

this.contentHTML = this.contentHTML.trim();  // 문자열 앞 뒤 공백 제거

console.log("trim 후  =>", this.contentHTML)
console.log("trim 후 길이 =>", this.contentHTML.length)

// 본문 문자의 길이가 0보다 크지 않다면 내부 함수 실행
if(!(this.contentHTML.length > 0)) {
  alert(‘내용을 입력해 주세요’);
    return
  }

//console.log 결과
정규식 적용 후 =>  <p>             </p>
정규식 적용 후 길이 => 20

trim 후 =>               
trim 후 길이 => 0

 

참고 1. 

여기서 예로 버튼을 눌렀을때 알림을 띄워주는 형태로 작성을 하긴 했지만...

애초에 입력된 값이 없다면 저장 버튼이 비활성화 상태로 있도록 하는것이 더욱 좋을 것입니다.

 

참고 2.

코드를 Vue로 작성한걸 그대로 가져오다보니 titlecontentHTML의 값에 접근하기위해 this.가 붙어있습니다. 

이건 자신이 사용하는 형태에 맞춰서 변경하면 됩니다.

 

 

 

반응형