본문 바로가기
IT만들기/Java

한글 길이 자바스크립트 UTF-8 byte 길이 구하기

by 커피향처럼 2017. 6. 25.

글자수 카운트와 UTF-8의 바이트 길이를 표시하는걸 티스토리에 붙여봤습니다.
아래 textarea에 영문, 숫자, 한글 등 글자를 넣어보면 문장의 총 길이가 나옵니다. 
크롬에서는 아래 붙인 textarea가 작동을 하지 않네요.
부트스크랩기반으로 된 Fastboot 문제인지 괜찮은 스킨을 찾게 되면 교체하고 테스트 해봐야겠습니다.
티스토리가 자바스크립트를 적절하게 넣을 수 있어서 무척 좋네요.
엣지, 크롬, IE 등에서 잘 동작하는 스크립트이지만 아래와 같이 티스토리에 넣었을 경우 동작이 안되네요.
티스토레 넣은 textarea는 Edge 및 IE 11에서는 잘 동작합니다.

0byte / 0자

UTF-8 byte 길이 계산이 필요하다면 다음과 같이 하면 됩니다.

<!DOCTYPE html>
<html>
<head></head>
<body>

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
$(document).ready(function() {
 var lengthb = function(str) {
  var i;
  var m=str.length;
  var cnt=0;
  for(i=0;i<m;i++) {
   cnt += charByteSize(str.charAt(i));
  } return cnt;
 };

 var charByteSize = function(ch) {
  if (ch == null || ch.length == 0) {
   return 0;
  }

  var charCode = ch.charCodeAt(0);

  if (charCode <= 0x00007F) {
   return 1;
  } else if (charCode <= 0x0007FF) {
   return 2;
  } else if (charCode <= 0x00FFFF) {
   return 3;
  } else {
   return 4;
  }
 }

 $("#mystarlight_textarea").on("keyup", function(){
  var size = $("#mystarlight_textarea").text().length;
  var byteSize = lengthb($("#mystarlight_textarea").text());
  $(this).prev().find(".textlengthb").text(byteSize);
  $(this).prev().find(".textlength").text(size);
 });
});
</script>
<div style="text-align:left;"><span class="textlengthb">0</span>byte / <span class="textlength">0</span>자</div>
<textarea id="mystarlight_textarea" style="width:100%;border:1px solid #ccc:resize:vertical;" rows="10" cols="0"></textarea>

</body></html>


저작자표시 비영리 변경금지

'IT만들기 > Java' 카테고리의 다른 글

java/jsp utf-8로 한글처리하기  (0) 2020.03.07
자바는 무엇이며 왜 필요합니까?  (0) 2018.10.12
[Java Exception] 자바 에러 목록 및 ERROR 처리  (0) 2017.11.08
jsp 에러페이지 만들기  (0) 2017.07.10
jsp 반영 안될 때  (0) 2017.06.17
자바 제네릭스  (0) 2017.06.17
JEUS에서 지원하는 Specification  (0) 2017.06.10
GPKI 모듈 설치  (0) 2011.10.10

관련글

댓글

티스토리툴바