jQuery截取指定长度字符串的实现原理及代码

更新时间：2014年07月01日 11:25:47 投稿：whsnow

截取指定长度字符串操作在新闻列表这种类型的操作中大量应用，下面有个示例，大家可以参考下

截取指定长度字符串操作在网站建设中大量使用，尤其是在新闻列表这种类型的操作中大量应用。

下面就是一个截取字符串代码实例:

<!DOCTYPE HTML> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>jQuery截取字符串操作</title> 
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> 
<style> 
* 
{ 
margin:0; 
padding:0; 
font-family:"宋体", Arial, Helvetica, sans-serif; 
} 
#best 
{ 
width:300px; 
height:200px; 
border:1px solid #ccc; 
margin:60px auto 0; 
line-height:1.6; 
font-size:14px; 
padding:10px 0 0 10px 
} 
.blank 
{ 
font-size:18px; 
font-weight:bold; 
text-align:center; 
padding:20px 
} 
</style> 
<script type="text/javascript"> 
jQuery.fn.limit=function(){ 
var self = $("div[limit]"); 
self.each(function(){ 
var objString = $(this).text(); 
var objLength = $(this).text().length; 
var num = $(this).attr("limit"); 
if(objLength > num){ 
$(this).attr("title",objString); 
objString = $(this).text(objString.substring(0,num) + "..."); 
} 
}) 
} 
$(function(){ 
$(document.body).limit(); 
}) 
</script> 
</head> 
<body> 
<div id="best"> 
<div limit="12">计算字串的长度长度长度长度</div> 
<div limit="10">这边有优化很公开这边</div> 
<div limit="12">这边有优化很公开长度长度很公开长度</div> 
<div limit="12">计算字长度长度</div> 
<div limit="10">这边有优化很边有优化很边有优化很边有优化很边有优化很</div> 
</div> 
</body> 
</html>

以上代码实现了截取字符串的功能，下面简单介绍一下它如何实现此效果的:

一.实现原理:
获取div中文本的长度，然后和通过和属性limit规定的长度进行对比，如果超出长度则使用截取指定的长度，后面用...替代。

二.代码注释:
1.jQuery.fn.limit=function(){}，用以为jQuery扩展一个实例函数，jQuery对象可以调用此函数。
2.var self = $("div[limit]"),用以获去具有limit属性的div对象集合。
3.self.each(function(){ }，可以让获取的让div对象集合中的每一个对象遍历执行一次指定的函数。
4.var objString = $(this).text()，获取div元素中的文本内容，这里的this是指当each()函数进行遍历时当前div。
5.var objLength = $(this).text().length，获取当前div中文本内容的长度。
6.var num = $(this).attr("limit")，获取div中limit属性值，在这里用作了指定的字符长度。
7.if(objLength > num){},div中文本内容长度大于指定长度这执行指定的代码。
8.$(this).attr("title",objString)，将div的title属性值设置为div中的内容。
9.objString = $(this).text(objString.substring(0,num) + "...")，截取指定长度字符串，超出的用省略号代替。

您可能感兴趣的文章:

jQuery 动态云标签插件
这里推荐给大家一款jquery动态云标签的插件，非常的炫，在指定块级元素内动态生成a标签，a标签的高度、宽度、位置、层数、背景颜色随机可控，a标签渐隐显示和渐隐消失，可改变初始化的透明度，鼠标悬浮停止动画且透明度最大，层数最高，鼠标离开，恢复之前状态
2014-11-11
jQuery中addClass()方法用法实例
这篇文章主要介绍了jQuery中addClass()方法用法,实例分析了addClass()方法的功能、定义及向匹配元素添加一个或多个类的使用技巧,需要的朋友可以参考下
2015-01-01
jQuery Ajax async=>false异步改为同步时,解决导致浏览器假死的问题
今天小编就为大家分享一篇jQuery Ajax async=>false异步改为同步时,解决导致浏览器假死的问题，具有很好的参考价值，希望对大家有所帮助，一起跟随小编过来看看吧
2019-07-07
jQuery利用键盘上下键移动表格内容
这篇文章主要为大家详细介绍了jQuery利用键盘上下键移动表格内容，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-02-02
jQuery语法总结和注意事项小结
jQuery是继prototype之后的又一个优秀的Javascript框架,它是一个简洁快速灵活的JavaScript框架，它能让你在你的网页上简单的操作文档、处理事件、实现特效并为Web页面添加Ajax交互
2012-11-11
在网站上应该用的30个jQuery插件整理
jQuery插件是网页设计师最喜欢的。从图像滑块，图像画廊和导航插件，它们是如此众多，如此多样，如此惊人的和互动可以制作美化网站
2011-11-11
jQuery中after()方法用法实例
这篇文章主要介绍了jQuery中after()方法用法,以实例形式较为详细的分析了after()方法的功能、特性与使用技巧,具有一定的参考借鉴价值,需要的朋友可以参考下
2014-12-12
jQuery对表单元素的取值和赋值操作代码
使用常规的思路：$(“#keyword”).value 取值是取不到的，因为此时$(‘#keydord’)已经不是个element，而是个jquery对象，所以应该使用：$(“#keyword”).val()
2011-05-05
jQuery配合coin-slider插件制作幻灯片效果的流程解析
coin-slider是GitHub上的一个人气JavaScript开源插件,用它来实现幻灯片效果只需要动手写很少的代码,下面我们就来看一下jQuery配合coin-slider插件制作幻灯片效果的流程解析.
2016-05-05
基于jquery ui的alert,confirm方案（支持换肤）
这篇文章主要介绍了基于jquery ui的alert,confirm方案（支持换肤），修改自网友的源码，有需要的小伙伴参考下。
2015-04-04