JS计算输入框输入的长度

需求来源

开发的时候有时候会有这样的需求：
给一个输入框，在提交的时候需要校验输入的内容的长度不能超过20，详细校验规则如下：

• 中文算一个字
• 英文字母和数字两个算一个字

因为在视觉上，英文字母和数字占用的空间比较小，所以上面的要求也是合理的。

实现方案

很明显，我们现在就不能通过字符串的length属性来判断这个值的长度，因为length属性不管是中文、英文、数字都算是一个字符；

其实实现方案也比较多，接下来我这边使用一个简单的实现，具体原理就是：
正则匹配字母数字和其他占位置小的字符，将其长度统计为1，剩余的都统计为2；长度累加的结果除以2就是，我们想要的长度；
为了防止出现小数的情况，我们将除以2的结果向上取整处理。

/**
 * 获取输入内容的长度
 * @param value
 * @return 内容的长度
 */
export const getInputSize = (value: string): number => {
  if (!value) {
    return 0
  }
  const charCount = value.split('').reduce((prev, curr) => {
    // 英文字母和数字等算一个字符；这个暂时还不完善；
    if (/[a-z]|[0-9]|[,;.!@#-+/\\$%^*()<>?:"'{}~]/i.test(curr)) {
      return prev + 1
    }
    // 其他的算是2个字符
    return prev + 2
  }, 0)

  // 向上取整，防止出现半个字的情况
  return Math.ceil(charCount / 2)
}
// 使用方法
getInputSize('你好123') // 4
getInputSize('混合输入1哈哈35') // 8
getInputSize('这里有标点符号!@@%') // 9

‍