标题过长使用javascript按字节截取字符串

下面是详细讲解“标题过长使用javascript按字节截取字符串”的完整攻略：

标题过长使用javascript按字节截取字符串

• 问题： 在前端页面中，有时候可能会出现标题过长的情况，如果不进行处理，就会影响页面的美观度。但是直接截断字符串又可能会出现汉字被切断的情况，怎么办呢？使用javascript按字节截取字符串是一种解决方案。

• 解决方案： 使用javascript中的substr方法，结合正则表达式来截取字符串。具体的步骤如下：

• 将字符串赋值给一个变量。

var str = '这是一段很长的字符串，需要截取。';

1. 安装您的需求编写正则表达式。

// 此正则表达式匹配中文字符。
var reg = /[^\x00-\xff]/g;

1. 定义一个计数器变量。

var count = 0;

1. 循环字符串，判断当前字符是否为中文字符，若为中文字符，则计数器加2，否则计数器加1。

for (var i = 0; i < str.length; i++) {
  if (reg.test(str[i])) {
    count += 2;
  } else {
    count += 1;
  }
}

1. 根据计数器的值，截取字符串。

// 截取前10个字节
str.substr(0, 10);

1. 最后，需要注意的是，由于单个中文字符需要占据两个字节，因此在截取字符串时，需要根据计数器的值来算出实际需要截取的字节数。如下所示：

function cutStr(str, len) {
    var temp;
    var icount = 0;
    var patrn = /[^\x00-\xff]/; //中文字符匹配
    var strre = "";
    for (var i = 0; i < str.length; i++) {
        if (icount < len - 1) {
            temp = str.substr(i, 1);
            if (patrn.exec(temp) == null) {
                icount = icount + 1;
            } else {
                icount = icount + 2;
            }
            strre += temp; //取出的字符连接到新字符串上
        } else {
            break;
        }
    }
    return strre;
}

通过调用cutStr函数，即可实现指定字节数截取字符串的功能。

• 示例1：

var str = '这是一段很长的字符串，需要截取。';
console.log(cutStr(str, 10)); // '这是一段很长的'

• 示例2：
  ```
  var str = '这是一段很长的字符串，需要截取。'
  console.log(cutStr(str, 20)); // '这是一段很长的字符串，'

在这个例子中，截取的字节数为20，因此字符串中能够包含4个完整的中文字符。