JavaScript实现中英文混合字符串的友好截取算法

中英文混合字符串截取问题分析

本文详细解析了JavaScript中实现包含中文字符串的友好截取功能的具体方法。

在前端展示字符串时，为了防止内容过长影响布局，通常需要对字符串进行截取。常用的技术手段包括使用JavaScript的substr或substring方法，以及结合字符串的length属性进行判断。

对于纯非中文的字符串，截取处理相对简单。然而，中文字符的length属性值被判定为1，而非其实际占用的2个字节宽度，这导致直接截取后的字符串在视觉显示上不够友好。

例如，假设有一个由数字组成的字符串“1234567890”和一个由中文组成的字符串“一二三四五六七八九零”。

若用户希望仅显示前五位字符，常见的做法是执行str = str.substr(0, 5);这一操作。

然而，“12345”与“一二三四五”在屏幕上所占的视觉宽度存在显著差异，因为中文字符通常占用2个字节的宽度。为了获得更佳的显示效果，需要对截取逻辑进行优化。

因此，封装了以下JavaScript代码，该函数能够智能识别中文字符，并将其length值视为2进行计算。

$.String.Substr = function (str, n) {//字符串截取 包含对中文处理
  if (str.replace(/[\u4e00-\u9fa5]/g, "**").length <= n) {
    return str;
  }
  else {
    var len = 0;
    var tmpStr = "";
    for (var i = 0; i < str.length; i++) {//遍历字符串
      if (/[\u4e00-\u9fa5]/.test(str[i])) {//中文 长度为两字节
        len += 2;
      }
      else {
        len += 1;
      }
      if (len > n) {
        break;
      }
      else {
        tmpStr += str[i];
      }
    }
    return tmpStr + " ...";
  }
};

在线字符统计工具推荐

此外，推荐两款在线字符统计工具，均支持中英文及符号的统计功能，对开发者具有一定的参考和借鉴价值。

在线字数统计工具地址： http://tools.jb51.net/code/zishutongji

在线字符统计与编辑工具地址： http://tools.jb51.net/code/char_tongji

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript数学运算用法总结》、《JavaScript中json操作技巧总结》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript遍历算法与技巧总结》。

希望本文所述的实现方案对大家进行JavaScript程序设计有所帮助。