By aPOST in 자바스크립트 —

[Javascript] HTML 내용의 글자 수 카운팅과 글자 수 자르기

폼 입력 필드인 <textarea>, <input>에 입력하는 실시간 글자 수 확인 및 글자 수 입력 제한을 하는 이벤트 처리는 다음 글을 참고하시기 바랍니다.

> 입력 필드 글자수 카운팅과 입력 길이 제한

폼 입력 필드는 입력된 글자 수를 알기가 쉽습니다.

다음과 같이 쿼리 선택자로 해당 입력 요소의 문자열 값을 얻어서 문자열 길이 속성(length)으로 손쉽게 길이 정보를 얻을 수 있습니다.

document.querySelector('textarea[name=comment]').value.length

폼 입력 필드에는 입력하는 모든 문자가 개별 문자로 처리되기 때문에 문자 수 카운팅이 비교적 쉽지만, HTML 요소 안에 있는 내용의 글자 수 카운팅은 조금 다릅니다.

다음과 같은 태그 안의 글자 수는 몇 자가 될까요?

        <p id="title">  코멘트  <br/>
            <span>
            추가   </span>작성  
            <span>(최대100자)</span>
        </p>
HTML 코드에 실제 들어있는 공백들 표시

들여쓰기에 여러 개의 공백, 그리고 중간중간 줄 바꿈과 태그가 들어있습니다.

그리고, 잘못된 태그에 대한 보정이 렌더러에 의해서 자동으로 처리되기 때문에 소스 코드 상에 보이는 것과 웹 브라우저 화면에 표시되는 것과는 길이가 다를 수도 있습니다.

잘못 표기된 태그는 웹 브라우저 파싱 과정에서 보정됩니다.

<br/> 태그는 웹 브라우저에서 <br> 로 변경됩니다. 따라서 <p> 태그 안의 내용 길이는 1만큼 줄어들게 됩니다.

innerHTML 문자열 길이

태그와 공백, 줄바꿈(\n) 모두 카운트됩니다. 태그 30자, 텍스트 68자, 줄 바꿈 4개 해서 102자가 됩니다. HTML 문서에서 줄 바꿈은 1글자로 처리가 됩니다.

console.log(document.querySelector('#title').innerHTML);
console.log(document.querySelector('#title').innerHTML.length);
innerHTML 콘솔 출력 내용

textContent 문자열 길이

innerHTML 에서 태그만 제외한 길이가 됩니다. 72자입니다.

기본적으로는 textContent 결과는 HTML 내용(innerHTML)에서 태그만 제거하는 정규식을 사용한 것과 같습니다.

innerHTML.replace(/(<([^>]+)>)/ig,"") == textContent

textContent 콘솔 출력 내용

innerText 문자열 길이

태그와 중복 공백, 그리고 줄바꿈 표시가 제외됩니다. 18자가 길이가 됩니다.

공백 제거 규칙은 다음과 같습니다.

  1. 표시 내용 맨앞과 맨뒤의 공백은 제거. trim()과 같음.
  2. 2개 이상의 연달아 나오는 공백은 1개로 줄임.

textContent.trim().replace(/  +/g,"").length == innerText

가 됩니다.

innerText 콘솔 출력 내용

글자 수 자르기

자바스크립트에는 문자열을 자르는 메서드가 3개가 있습니다.

substr(시작위치인덱스, 길이) 인덱스는 0에서 시작. 시작 위치부터 길이만큼 하위 문자열을 반환.
길이 값이 가져올 수 있는 하위 문자열 보다 크면 문자열 끝까지 반환.
substring(시작위치인덱스, 끝위치인덱스) 인덱스는 0에서 시작. 시작 위치부터 끝 위치까지의 문자열을 반환.
길이 값이 가져올 수 있는 하위 문자열 보다 크면 문자열 끝까지 반환.
slice(시작위치인덱스, 끝위치인덱스) substring()과 사용법이 같습니다. 
console.log(document.querySelector('#title').innerText.substr(5,10));
console.log(document.querySelector('#title').innerText.substring(5,15));
console.log(document.querySelector('#title').innerText.slice(15,20));

입력 글자수를 제한하는 방법

입력 글자수를 제한하기 위해 이벤트 리스너를 등록할 때는 입력 길이를 제한하는 시점을 정해야 합니다.

이용자가 글자를 입력할 때마다 길이를 초과했는지 체크해서 입력 자체를 못하게 하려면 다음처럼 "keydown" 이벤트를 사용합니다.

document.getElementById('review').addEventListener('keydown',function(e){
    let lengthCheckRegEx = new RegExp('^.{'+maxlength+',}$');
    if(lengthCheckRegEx.test(e.target.value)){
        e.target.value = e.target.value.substr(0,100);// 100자 초과 글자는 잘라냄
    }
});

다만 이렇게 빈번하게 키 입력을 체크할 때는 알림 표시에 주의해야 합니다. 자칫 알림 창이 반복해서 표시되면서 이용자 불편을 초래할 수 있기 때문입니다.

조금 더 간편하게 사용자 입력이 완료된 후 마지막에 길이를 체크하려면 다음처럼 "blur" 이벤트를 사용해서 사용자가 입력 필드에서 벗어나면 길이 체크를 하도록 할 수 있습니다.

document.getElementById('review').addEventListener('blur',function(e){
});
자바스크립트 관련글
글 196 개 모두보기 →