textarea 글자수 나오는 소스를 바이트수로 바꿀수 있을까요?
본문
아래 소스는 textarea에 글씨를 쓰면 글자수가 나오는 소스입니다.
작동은 잘 하고 있습니다.
이것을 글자수가 아니라 바이트수로 바꿀수 있을까요?
도움 주시면 감사하겠습니다.
<div class="text_box2">
<p class="txt">글자수를 나타냅니다.<div class="count"><span>0</span>/3000</div></p>
<textarea name="wr_content" id="wr_content" rows="25" style="width:250px"></textarea>
<script>
$('.text_box2 textarea').keyup(function(){
var content = $(this).val();
$('.text_box2 .count span').html(content.length);
if (content.length > 3000){
alert("최대 3000자까지 입력 가능합니다.");
$(this).val(content.substring(0, 3000));
$('.text_box2 .count span').html(3000);
}
});
</script>
</div>
답변 1
function getByteLength(str) {
let byteLength = 0;
for (let i = 0; i < str.length; i++) {
const charCode = str.charCodeAt(i);
if (charCode <= 0x007F) {
byteLength += 1; // 아스키 문자는 1바이트
} else if (charCode <= 0x07FF) {
byteLength += 2; // 2바이트 문자
} else {
byteLength += 3; // 3바이트 문자 (한글 등)
}
}
return byteLength;
}
$('#wr_content').keyup(function () {
const content = $(this).val();
const byteLength = getByteLength(content);
$('.text_box2 .count span').html(byteLength);
if (byteLength > 3000) {
alert("최대 3000바이트까지 입력 가능합니다.");
// 입력을 3000바이트로 제한
let trimmedContent = content;
while (getByteLength(trimmedContent) > 3000) {
trimmedContent = trimmedContent.substring(0, trimmedContent.length - 1);
}
$(this).val(trimmedContent);
$('.text_box2 .count span').html(getByteLength(trimmedContent));
}
});