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


Posted in Javascript onJuly 01, 2014

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

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

<!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) + "..."),截取指定长度字符串,超出的用省略号代替。

Javascript 相关文章推荐
加速IE的Javascript document输出的方法
Dec 02 Javascript
JavaScript中URL编码函数代码
Jan 11 Javascript
js replace正则表达式应用案例讲解
Jan 17 Javascript
使用javascript过滤html的字符串(注释标记法)
Jul 08 Javascript
使用insertAfter()方法在现有元素后添加一个新元素
May 28 Javascript
jQuery 写的简单打字游戏可以提示正确和错误的次数
Jul 01 Javascript
JavaScript中string转换成number介绍
Dec 31 Javascript
jQuery插件实现大图全屏图片相册
Mar 14 Javascript
jQuery修改DOM结构_动力节点Java学院整理
Jul 05 jQuery
js实现动态改变radio状态的方法
Feb 28 Javascript
浅谈在node.js进入文件目录的问题
May 13 Javascript
vue+springboot+element+vue-resource实现文件上传教程
Oct 21 Javascript
原生js事件的添加和删除的封装
Jul 01 #Javascript
jQuery的:parent选择器定义和用法
Jul 01 #Javascript
jQuery 写的简单打字游戏可以提示正确和错误的次数
Jul 01 #Javascript
JavaScript利用正则表达式去除日期中的“-”
Jul 01 #Javascript
jquery实现图片按比例缩放示例
Jul 01 #Javascript
js 实现的可折叠留言板(附源码下载)
Jul 01 #Javascript
JavaScript利用append添加元素报错的解决方法
Jul 01 #Javascript
You might like
十天学会php(2)
2006/10/09 PHP
php 字符串替换的方法
2012/01/10 PHP
PHP中返回引用类型的方法
2015/04/03 PHP
PHP中的Iterator迭代对象属性详解
2019/04/12 PHP
TP5框架页面跳转样式操作示例
2020/04/05 PHP
QQ登录简单实现代码
2021/03/09 Javascript
新浪刚打开页面出来的全屏广告代码
2007/04/02 Javascript
JavaScript 比较时间大小的代码
2010/04/24 Javascript
JQuery中判断一个元素下面是否有内容或者有某个标签的判断代码
2012/02/02 Javascript
父节点获取子节点的字符串示例代码
2014/02/26 Javascript
JavaScript模拟可展开、拖动与关闭的聊天窗口实例
2015/05/12 Javascript
js实现仿爱微网两级导航菜单效果代码
2015/08/31 Javascript
JavaScript DOM 对象深入了解
2016/07/20 Javascript
DropDownList实现可输入可选择(两种版本可选)
2016/12/07 Javascript
canvas实现探照灯效果
2017/02/07 Javascript
jQuery中hover方法搭配css的hover选择器,实现选中元素突出显示方法
2017/05/08 jQuery
Vue修改mint-ui默认样式的方法
2018/02/03 Javascript
Express下采用bcryptjs进行密码加密的方法
2018/02/07 Javascript
vue watch关于对象内的属性监听
2019/04/22 Javascript
Easyui 关闭jquery-easui tab标签页前触发事件的解决方法
2019/04/28 jQuery
Vue2.0 $set()的正确使用详解
2020/07/28 Javascript
js实现QQ邮箱邮件拖拽删除功能
2020/08/27 Javascript
用Python脚本来删除指定容量以上的文件的教程
2015/05/04 Python
Python内置的HTTP协议服务器SimpleHTTPServer使用指南
2016/03/30 Python
Python中super函数用法实例分析
2019/03/18 Python
Python filter过滤器原理及实例应用
2020/08/18 Python
美国儿童运动鞋和服装零售商:Kids Foot Locker
2017/08/05 全球购物
外语学院毕业生的自我鉴定
2013/11/28 职场文书
儿媳婚宴答谢词
2014/01/14 职场文书
服务员自我评价
2014/01/25 职场文书
保险专业求职信
2014/07/07 职场文书
大学生党员自我批评思想汇报
2014/10/10 职场文书
2016新年致辞
2015/08/01 职场文书
如何使用Python对NetCDF数据做空间相关分析
2021/04/21 Python
用golang如何替换某个文件中的字符串
2021/04/25 Golang
Python图片处理之图片裁剪教程
2021/05/27 Python