본문 바로가기
notion/modules

javascript 문자 길이와 공백 체크하기[react][maxLength ]

by 서수이 서수이 2021. 2. 23.
반응형

리액트.js에서 개발하다보니 문자길이를 바이트로 해결해야했다.

문제
문자열를 입력받고, 공백만 입력한 경우를 체크해야한다.

    <input type='text' maxLength="50" value={... />
    <textarea maxlength="50">

화면을 구현하다보니 문자입력 제한을 해야하는 경우가 있다.

maxLength를 사용하면 문자 제한을 두었다.

여기서 의도치 않는 에러가 발생하였다.

//입력 데이터

    가나다라마바사아자차가나다라마바사아자차가나다라마바사아자차가나다라마바사아자차가나다라마바사아자차

그냥 입력할 때는 위 처럼 50자가 잘 제한이 되었다.

[에러부분]

위 이미지처럼 끝에 자음이나 모음 혹은 예상치 못한 값들을 입력하고 다른 곳을 클릭을 하면 입력이 되었다.

문자 갯수로도 해도 되지만, 이번에는 바이트로 계산을 하여 공백을 제한하고, 문자열에 제한을 두려고 한다.

쉽게,

  1. 100자를 입력한다.
  2. 공백만 입력을 했을 경우, 정규식으로 체크한다.
  3. 한글은 2Bytes, 그외 문자는 1Bytes 이니 최대 2Bytes로 계산을 할 것.
    문자길이 X 2를 하여 바이트를 넘지 않게 해준다.

경고
인코딩에 따라서 문자의 Byte가 차이가 난다.
이 부분은 나중에 체크를 하여 올려놓도록 하겠지만, 지금 당장 간단하게 적어놓겠다.

UTF-8 로 하게되면 2Bytes
극단적으로 UTF-32 로 사용하게 되면 모든 문자가 4Bytes라면 아래의 코드가 안되니 나중에는 이부분도 추가해야겟지만, 지금은 대충 돌리면 되는거라서 아래처럼 짜서 보관한다.

const result = textCheckByte('문자열을 때려넣고', 200);
console.log(result);

const callCheckMsg = (type) => {
  switch (type) {
    case 'space':
      return {
        success: false,
        error: '내용을 입력해주세요',
      };
    case 'long':
      return {
        success: false,
        error: '내용 길이가 제한을 초과했습니다.',
      };
    default:
      return {
        success: true,
      };
  }
};

/*
    txt: 검사할 문자열
    maxLen 제한할 최대 문자길이
*/
export const textCheckByte = (txt, maxLen = 1000) => {
  var _max = maxLen;

  //공백체크
  var spaceCheck = txt.replace(/\s| /gi, '');
  if (spaceCheck === '') {
    return callCheckMsg('space');
  }

  const totalLength = txt.length;

  if (totalLength <= _max) {
    return callCheckMsg();
  } else {
    return callCheckMsg('long');
  }
};
반응형

태그

,

댓글0