jQuery截取字符串插件区分中英文:

最新推荐文章于 2021-01-12 00:38:29 发布

yhyhyhy

最新推荐文章于 2021-01-12 00:38:29 发布

阅读量1.3k

点赞数

分类专栏： Javascript 文章标签： jquery

Javascript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

截取字符串功能在大量网站都有应用，比如新闻列表这样的功能，因为新闻的标题长途未必都是恰如其分的，所以要根据需要截取指定长度的字符串，下面就分享一个jQuery实现的插件，此插件能够截取指定长度的字符串，并且能够区分中英文。
代码实例如下:

<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.softwhy.com/" />  
<title>jQuery截取字符串插件区分中英文</title>  
<script type="text/javascript" src="http://www.softwhy.com/mytest/jQuery/jquery-1.8.3.js"></script>  
<script type="text/javascript">  
(function($){  
  $.extend($,{  
    fixedWidth:function(str,length,char){  
      str=str.toString();  
      if(!char) char="...";  
      var num=length-lengthB(str);  
      if(num<0) 
      {  
        str=substringB(str,length-lengthB(char))+char;  
      }  
      return str;  
      function substringB(str,length) 
      {  
        var num=0,len=str.length,tenp="";  
        if(len) 
        {  
          for(var i=0;i<len;i++) 
          {  
            if(num>length) break;  
            if(str.charCodeAt(i)>255) 
            {  
              num+=2;  
              tenp+=str.charAt(i);  
            } 
            else 
            {  
              num++;  
              tenp+=str.charAt(i);  
            }  
          }  
          return tenp;  
        } 
        else 
        {  
          return null;  
        }  
      }  
      function lengthB(str) 
      {  
        var num=0,len=str.length;  
        if(len) 
        {  
          for(var i=0;i<len;i++) 
          {  
            if(str.charCodeAt(i)>255) 
            {  
              num+=2;  
            } 
            else 
            {  
              num++;  
            }  
          }  
          return num;  
        } 
        else 
        {  
          return 0;  
        }  
      }  
    }  
  });  
})(jQuery);  
var str="希望您在这里能够有一定的收获"; 
document.write($.fixedWidth(str,20)); 
</script>  
</head>  
<body>  
</body>  
</html>

以上代码实现了截取字符串的功能，如果字符串超出了指定的长度，那么就会截取规定的长度，然后超出的以省略号替代，下面就介绍一下此插件的实现过程:
一.实现原理:
原理其实很简单的，下面就简单介绍一下：
1.为jQuery类库添加fixedWidth()方法：
实现这个是通过 $.extend()方法来实现的，这个函数式为jQuery类直接添加方法，也就是说添加的函数式静态方法，并非实例方法，关于 $.extend()函数可以参阅 $.extend()函数用法详解一章节。
2.关于中英文区分:
字符串的length属性返回值字符串中字符的个数，也就是说字符串中一个英文单词就是一个字符，一个汉字也是一个字符。但是一个英文字符和一个汉字在内存占据的空间是不一样的，一个英文字符占据一个字节，一个汉字占据两个字节。在这里是通过charCodeAt()函数判断的，如果返回值大于255的话，就说明汉字，那么num就会加2，否则就是英文字符，num加1。至于截取就更容易了，这里就不多说了，参阅代码注释即可。
二.代码注释:
1.(function($){})(jQuery)，声明一个匿名函数，并执行此函数，参数是jQuery。
2.$.extend($,{})，为jQuery类库添加静态方法。
3.fixedWidth:function(str,length,char){}，要被添加的方法，具有三个参数，str是要被截取的原字符串，length是要被截取的长度，char是自定义以何种形式作为超出内容的省略符号，比如默认状态下是"..."，此参数是可选的。
4.var str=str.toString()，转换为字符串。
5.if(!char) char="..."，如果没有没有提供第三个参数，那么默认就是"..."。
6.var num=length-lengthB(str)，要截取的字符长度减去字符的长度，经过lengthB()函数计算，已经区分了中英文。
7.if(num<0){}，如果小于0，也就是要截取的长度小于字符串的长度。
8.str=substringB(str,length-lengthB(char))+char，截取指定字符串长度，并加上char。
9.return str，如果要截取的长度大于字符串的长度，那么字符串将会被原样返回。
10function substringB(str,length){}，此函数用来截取字符串，具有两个参数，第一个参数要被截取的原字符串，第二个是要真正被截取的字符串的长度，这个长度是fixedWidth()函数中第二个参数减去被省略字符串替代字符的长度。
11.var num=0,len=str.length,tenp="";声明几个变量并赋值。
12.if(len)，判断字符串是否是空字符串。
13.for(var i=0;i<len;i++){}，遍历字符串中的每一个字符。
14.if(num>length) break，如果num大于真正要被截取的长度，就跳出本次循环。
15.if(str.charCodeAt(i)>255)，判断指定索引的Unicode编码是否大约255，如果大于就是汉字，如果小于就是英文字符。
16.num+=2，将num加2.
17.tenp+=str.charAt(i)，将指定索引的字符追加到tenp中。
18.else{num++; tenp+=str.charAt(i)}，如果是英文字符，num加1，再将指定索引的字符追加到tenp中。
19.return tenp，返回字符串。
20.function lengthB(str){}，声明一个函数，用来计算字符串的长度，区分中英文，原理这里就不说了，因为和上面介绍的大同小异。

yhyhyhy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery截取字符串插件区分中英文:

截取字符串功能在大量网站都有应用，比如新闻列表这样的功能，因为新闻的标题长途未必都是恰如其分的，所以要根据需要截取指定长度的字符串，下面就分享一个jQuery实现的插件，此插件能够截取指定长度的字符串，并且能够区分中英文。代码实例如下: DOCTYPE html> html> head> meta charset=" utf-8"> meta name="a
复制链接

扫一扫