js数字、字母、符号等半角文本按0.5个字符计算长度

本文主要是介绍js数字、字母、符号等半角文本按0.5个字符计算长度，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

半角文本按0.5个字符计算

封装 getEffectiveLength 方法

function getEffectiveLength(text) {// 使用正则表达式替换掉所有全角字符，然后获取替换后的字符串长度var halfWidthLength = text.replace(/[^\x00-\xff]/g, "").length;// 原始字符串长度减去半角字符所占据的长度，理论上得到的是全角字符的数量var fullWidthCharsCount = text.length - halfWidthLength;// 将半角字符当作0.5个字符计算，这里假设text全部为半角字符，则实际字符数为halfWidthLength * 0.5var halfWidthCharsAsHalf = halfWidthLength * 0.5;// 合并全角和半角字符的计数var effectiveLength = fullWidthCharsCount + halfWidthCharsAsHalf;return effectiveLength;
}

使用

// 示例：
var input = "Hello你好！";
console.log(getEffectiveLength(input)); // 输出：7.5，即5个半角字符加上2个全角字符

输入框maxlength按半角长度计算

可以自定义一个指令（directive）来动态监控输入内容，并结合上面提供的 getEffectiveLength 函数进行长度校验

首先，创建一个名为 v-effective-length 的自定义指令

Vue.directive('effective-length', {bind(el, binding, vnode) {const maxLength = binding.value;const inputEl = el.querySelector('input');function handleInput() {const value = inputEl.value;const effectiveLength = getEffectiveLength(value);if (effectiveLength > maxLength) {inputEl.value = value.slice(0, -1);vnode.componentInstance.$emit('input', inputEl.value);}}inputEl.addEventListener('input', handleInput);},
});

在使用 el-input 组件时，应用这个自定义指令，并设置期望的最大有效长度

<template><el-input v-model="inputValue" v-effective-length="10"></el-input>
</template>

这篇关于js数字、字母、符号等半角文本按0.5个字符计算长度的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---