8

JS~字符串长度判断，超出进行自动截取（支持中文）

 3 years ago
source link: https://www.cnblogs.com/lori/p/3907960.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

JS~字符串长度判断，超出进行自动截取（支持中文）

今天一个小弟问我的问题，在文本框中输入字符，如果超出指定长度，就把它截取，要求中文等于两个字符的长度，我找一下资料，把这个功能实现了，下面是JS代码：

<html>
<script src="http://common.cnblogs.com/script/jquery.js" type="text/javascript"></script>

<body>
    <input type="text" name="username" />
</body>
<script type="text/ecmascript">

   
    var GetLength = function (str) {
        ///<summary>获得字符串实际长度，中文2，英文1</summary>
        ///<param name="str">要获得长度的字符串</param>
        var realLength = 0, len = str.length, charCode = -1;
        for (var i = 0; i < len; i++) {
            charCode = str.charCodeAt(i);
            if (charCode >= 0 && charCode <= 128) realLength += 1;
            else realLength += 2;
        }
        return realLength;
    };

    //js截取字符串，中英文都能用  
    //如果给定的字符串大于指定长度，截取指定长度返回，否者返回源字符串。  
    //字符串，长度  

    /** 
     * js截取字符串，中英文都能用 
     * @param str：需要截取的字符串 
     * @param len: 需要截取的长度 
     */
    function cutstr(str, len) {
        var str_length = 0;
        var str_len = 0;
        str_cut = new String();
        str_len = str.length;
        for (var i = 0; i < str_len; i++) {
            a = str.charAt(i);
            str_length++;
            if (escape(a).length > 4) {
                //中文字符的长度经编码之后大于4  
                str_length++;
            }
            str_cut = str_cut.concat(a);
            if (str_length >= len) {
                str_cut = str_cut.concat("...");
                return str_cut;
            }
        }
        //如果给定字符串小于指定长度，则返回源字符串；  
        if (str_length < len) {
            return str;
        }
    }
$(function () { 
     $("input[name=username]").bind('keyup', function () {
      if (GetLength($(this).val()) > 10) { 
       $(this).val(cutstr($(this).val(), 10)); 
       return; 
     } 
  }); 
}); 
</script> 
</html>

效果如图：


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK