WEB前端

jQuery 截取字符串以超出部分省略号...显示

位置:首页 > WEB前端 > jquery教程,2019-08-07 10:42
本章节介绍一下如何实现截取字符串功能,如超出div宽度部分使用省略号...替代。

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<meta name="author" content="" /> 
<title>jQuery 截取字符串以超出部分省略号...显示</title>  
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> 
<script type="text/javascript"> 
$.fn.extend({ 
  displayPart:function(){ 
    var displayLength=100; 
    displayLength=this.attr("displayLength") || displayLength; 
    var text=this.text(); 
    if(!text) return "";
    var result = ""; 
    var count = 0; 
    for(var i = 0; i < displayLength; i++) { 
      var _char = text.charAt(i); 
      if(count >= displayLength) break; 
      if (/[^x00-xff]/.test(_char)) count++;
  
      result += _char; 
      count++; 
    } 
    if(result.length < text.length){ 
      result += "..."; 
    } 
    this.text(result); 
  } 
});
$(function(){ 
  $(".displayPart").displayPart(); 
}); 
</script> 
</head>
<body> 
<div class="displayPart" displayLength="20">IT技术学习的网站!电脑、手机、编程开发学习的IT技术网站!www.ablanxue.com。</div> 
</body> 
</html>

以上代码实现了我们的要求,下面介绍一下它的实现过程。

一.代码注释:

(1).$.fn.extend({}),为jQuery对象实例添加对象。

(2).displayPart:function(){},设置对象的属性,属性值是一个函数,实现截取字符串功能。

(3).var displayLength=100,默认的截取长度为100。

(4).displayLength=this.attr("displayLength") || displayLength,如果设置了截取长度则使用此值,否则使用默认值。

(5).var text=this.text(),获取元素中的文本内容。

(6).if(!text) return "",如果文本内容为空则返回一个空字符。

(7).var result = "",此变量用来存储截取结果。

(8).var count = 0,此变量用来作为标识,存储当前字符串的长度。

(9).for(var i = 0; i < displayLength; i++),遍历字符串中的字符,displayLength是要截取的长度。

(10).var _char = text.charAt(i),获取指定位置的字符。

(11).if(count >= displayLength) break,count的值大于displayLength,就说明超出长度了,于是跳出循环。

(12).if (/[^x00-xff]/.test(_char)) count++,判断当前字符是否是双字节的,如果是先将count加1,因为后面还要加1,所以是将双字节按照占2个长度处理。

(13).result += _char,连接字符串。

(14).count++,对count进行加1操作。

(15).if(result.length < text.length){result += "...";} ,截取长度小于字符串实际长度,后面跟有省略号。

(16).this.text(result),写入截取后的字符串。

TAGS:jQuery 截取字符串

猜你喜欢

NewHot