jquery截取中文字符串的实现代码

admin 2026年03月26日 07:46 103 0

jQuery本身未直接提供中文字符串截取方法，因中文字符在JavaScript中可能占多个字节，直接使用substring或slice易导致乱码，常见实现思路是通过正则表达式匹配中文字符，计算实际字符长度后截取，使用/^[\u4e00-\u9fa5]$/判断中文字符，结合split('')遍历字符数组，统计中文字符长度，再使用slice()截取目标长度字符串，也可结合substr()和字节长度计算，确保截取后显示正常，避免乱码问题，核心是处理中文字符的特殊性，实现精准截取。

jQuery截取中文字符串的实用代码实现与注意事项

在网页开发中，经常需要截取字符串长度来展示标题、摘要等内容，例如限制文章标题显示20个字符（含中英文），由于中文字符在UTF-8编码下通常占3个字节，而英文字符仅占1个字节，直接使用JavaScript原生的substring()或slice()方法按字符数截取，可能会导致乱码或显示异常（如截断处出现半个汉字），本文将详细介绍如何通过jQuery结合JavaScript实现中文字符串的安全截取,并提供实用代码示例和最佳实践。

为什么需要专门处理中文字符串截取？

JavaScript的字符串截取方法（如substring(start, end)）是基于字符索引的，无法区分中英文的字节差异,让我们来看一个简单的例子：

var str = "你好abc";
console.log(str.substring(3)); // 输出："好abc"（正确按字符截取）

但如果按字节限制（如限制5个字节）,直接截取就会导致问题：

"你好"占6字节（2×3），"a"占1字节，共7字节
若限制5字节，截取到第2个字符（"好"）时已超6字节
直接截取会产生乱码

我们需要先计算字符串的字节长度，再按字节精确截取,确保不会出现半个汉字。

UTF-8编码基础知识

在深入解决方案之前，了解UTF-8编码的基本原理非常重要：

英文字符：如A-Z、a-z、0-9等基本ASCII字符，在UTF-8中占用1个字节
中文字符：常见汉字在UTF-8中占用3个字节
特殊字符：如标点符号、表情符号等，可能占用1-4个字节不等

这种编码差异正是导致截取问题的根本原因。

基于字节长度的jQuery截取方法实现

jQuery本身未提供直接的中文字符串截取方法，但我们可以通过扩展jQuery工具函数或直接结合JavaScript实现,以下是两种常见实现方式：

方法1：扩展jQuery工具函数（推荐）

通过$.extend()向jQuery命名空间添加自定义方法，方便全局调用,以下是完整代码实现：

// 扩展jQuery工具方法：按字节截取字符串
$.extend({
    substringByBytes: function(str, maxBytes, suffix) {
        if (!str || str.length === 0) return "";
        suffix = suffix || ""; // 默认后缀为空
        var byteCount = 0;
        var charArray = str.split('');
        var result = '';
        for (var i = 0; i < charArray.length; i++) {
            var char = charArray[i];
            // 计算当前字符的字节长度（UTF-8编码下，中文3字节，英文1字节）
            var charByteLen = char.charCodeAt(0) > 127 ? 3 : 1;
            // 如果加上当前字符后超过最大字节，且未添加后缀，则尝试添加后缀
            if (byteCount + charByteLen > maxBytes - suffix.length) {
                // 检查后缀是否可以添加（剩余字节是否够后缀长度）
                if (byteCount <= maxBytes - suffix.length) {
                    result += suffix;
                }
                break;
            }
            result += char;
            byteCount += charByteLen;
        }
        return result;
    }
});

使用示例：

var str = "你好，jQuery截取中文字符串的示例代码！Hello World!";
var result1 = $.substringByBytes(str, 10, '...'); // 限制10字节，加省略号
var result2 = $.substringByBytes(str, 20);       // 限制20字节，无后缀
console.log(result1); // 输出："你好..."（10字节内："你"3+"好"3+"，"3=9字节，剩余1字节不够"..."的3字节，故直接加后缀）
console.log(result2); // 输出："你好，jQue"（20字节：2个中文6字节+"，"3+"j"1+"Q"1+"u"1+"e"1+"r"1=13字节，剩余7字节可继续加字符）

方法2：直接通过jQuery选择器调用（适合DOM元素场景）

如果需要截取DOM元素中的文本内容（如<p>、<span>），可以直接通过jQuery获取文本后调用上述方法,并更新内容：

// 假设页面有<p class="summary">标签，需要截取其文本内容
$(".summary").each(function() {
    var $this = $(this);
    var originalText = $this.text();
    var maxLength = 30; // 限制30字节
    var truncatedText = $.substringByBytes(originalText, maxLength, '...');
    $this.text(truncatedText);
});

HTML示例：

<p class="summary">你好，这是一段需要截取的中英文混合文本，用于展示jQuery截取效果！Hello World!</p>

执行结果：

页面中<p>会显示为："你好，这是一段需要截取的中英文混合文本，用于展..."（实际显示取决于具体字节限制）

高级应用场景与最佳实践

处理多字节字符（如emoji）

对于可能包含emoji等4字节字符的场景,我们需要改进字节计算逻辑：

// 改进版：支持4字节字符（如emoji）
$.extend({
    substringByBytesAdvanced: function(str, maxBytes, suffix) {
        if (!str || str.length === 0) return "";
        suffix = suffix || "";
        var byteCount = 0;
        var result = '';
        var encoder = new TextEncoder();
        for (var i = 0; i < str.length; i++) {
            var char = str[i];
            var encoded = encoder.encode(char);
            var charByteLen = encoded.length;
            if (byteCount + charByteLen > maxBytes - suffix.length) {
                if (byteCount <= maxBytes - suffix.length) {
                    result += suffix;
                }
                break;
            }
            result += char;
            byteCount += charByteLen;
        }
        return result;
    }
});

动态计算显示区域宽度

在某些情况下,我们可能需要根据实际显示宽度而非字节长度来截取字符串：

// 根据元素实际宽度截取文本
$.fn.fitTextToWidth = function(maxWidth, suffix) {
    suffix = suffix || '...';
    return this.each(function() {
        var $this = $(this);
        var originalText = $this.text();
        var $temp = $('<span style="visibility:hidden; position:absolute;">').appendTo('body');
        $temp.text(originalText + suffix);
        while ($temp.width() > maxWidth && originalText.length > 0) {
            originalText = originalText.slice(0, -1);
            $temp.text(originalText + suffix);
        }
        $this.text(originalText + (originalText.length < $this.text().length - suffix.length ? suffix : ''));
        $temp.remove();
    });
};
// 使用示例
$('.title').fitTextToWidth(200, '...');

性能优化建议

对于大量文本或频繁调用的场景,可以考虑以下优化：

缓存计算结果：对于

标签： #截取 #中文