Javascriptで入力文字列をバイト数で制限する

Question

質問1
HTMLのformの入力項目をJavaScriptを用いて、指定のバイト数をオーバーしたら以降の文字列をカットする処理を組み込んでいますが、ShiftJISの場合は半角1バイト全角2バイトらしいのですが、UTF8は2~6バイトと聞きましたが下記のプログラムはバイト数カウント部分の処理の流れが理解できません。解説お願いいたします

//文字列のバイト数をカウントし、適切な長さにする
function substr(text,max_length) { 
    var r = 0; 
    for (var i = 0; i < text.length; i++) { 
        var c = text.charCodeAt(i); 
        // Shift_JIS: 0x0 ～ 0x80, 0xa0 , 0xa1 ～ 0xdf , 0xfd ～ 0xff 
        // Unicode : 0x0 ～ 0x80, 0xf8f0, 0xff61 ～ 0xff9f, 0xf8f1 ～ 0xf8f3 
        if ( (c >= 0x0 && c < 0x81) || (c == 0xf8f0) || (c >= 0xff61 && c < 0xffa0) || (c >= 0xf8f1 && c < 0xf8f4)) { 
            r += 1; 
        } else { 
            r += 2; 
        } 
        if (r>=max_length){
            text=text.slice(0,i-1);
        }
    } 
    return text; 
} 
//htmlのonblurに下記関数を指定し文字列制御
function input_textbox(target_control, integer_max) {
    var text=$(target_control).val();
    text=substr(text,integer_max);
    $(target_control).val(text);
}

質問2
上記コードで適切なバイト数に揃えた文字列をMysqlに格納していますが、現在のMysqlは文字数でしか指定できませんよね？そうした場合、256バイトの文字列を格納するときは、varchar(256)とかにする感じでしょうか？

Answer 1

バイト長さをえるなら

<script>
String.prototype.get_byte_length = function () {
  return(encodeURIComponent(this).replace(/%../g,"x").length);
}
window.addEventListener('DOMContentLoaded', function(e){
  document.querySelector('#j').addEventListener('input',function(e){
    console.log(e.target.value.get_byte_length());
    
  });
});
</script>
<input type="text" id="j">

バイト単位で文字列をカットすると文字の途中で切れる可能性がありますよ

Comments

[Lhankor_Mhy]

質問は「解説お願いいたします」だと思います。
あと、質問のコードでは、ShiftJISでの1バイト文字と2バイト文字の2種類に分けて処理してますが、ご回答のコードだと、そうはならないと思います。