JavaScript 实现字符串长度计算:汉字计为双字符

作者:代码拾荒时间:2026-10-29 18:51:37浏览:314

本文介绍在 JavaScript 中判断字符串长度的方法,重点解决数据库字段长度限制问题。通过自定义函数实现汉字算两个字符、字母数字算一个字符的计算逻辑,并提供完整的 HTML 与 JS 示例代码,帮助开发者在前端提交前进行有效验证。

JavaScript 字符串长度计算逻辑

在 JavaScript 中判断输入字符串的长度,通常需要遵循特定规则:将汉字视为两个字符,而字母和数字则视为一个字符。

在文本输入场景中,若数据库表字段存在长度限制,直接提交可能导致失败。因此,采用此方法进行前端验证是必要的。

具体实现代码如下:

完整代码实现与示例


<html>
<head>
  <title>js判断输入字符串长度(汉字算两个字符,字母数字算一个)</title>
  <style type="text/css">
    .pbt {
      margin-bottom: 10px;
    }

    .ie6 .pbt .ftid a, .ie7 .pbt .ftid a {
      margin-top: 1px;
    }

    .cl:after {
      clear: both;
      content: ".";
      display: block;
      height: 0;
      visibility: hidden;
    }
  </style>
  <script type="text/javascript">
    //获取字符串长度(汉字算两个字符,字母数字算一个)
    function getByteLen(val) {
      var len = 0;
      for (var i = 0; i < val.length; i++) {
        var a = val.charAt(i);
        if (a.match(/[^\x00-\xff]/ig) != null) {
          len += 2;
        }
        else {
          len += 1;
        }
      }
      return len;
    }
    // 只要键盘一抬起就验证编辑框中的文字长度,最大字符长度可以根据需要设定
    function checkLength(obj) {
      var maxChars = 80;//最多字符数   
      var curr = maxChars - getByteLen(obj.value);
      if (curr > 0) {
        document.getElementById("checklen").innerHTML = curr.toString();
      } else {
        document.getElementById("checklen").innerHTML = '0';
        document.getElementById("subject").readOnly = true;
      }
    }
  </script>
</head>
<body>
  <div class="pbt cl">
    <textarea id="subject" maxlength="80" onkeyup="checkLength(this)" accesskey="1" tabindex="11"></textarea>
    <span id="subjectchk">还可输入
    <strong id="checklen" style="color: #FF0000">80</strong>
      个字符
    </span>
    <span id="postNameRule" class="spn_flag_1" style="display: none"></span>
  </div>
</body>
</html>

上述内容即为 JavaScript 判断输入字符串长度的完整方法,希望能为您的学习提供有益帮助,掌握该长度判断技巧。

作者最新文章