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 相关文章推荐
基于jquery的滚动鼠标放大缩小图片效果
Oct 27 Javascript
JavaScript函数详解
Nov 17 Javascript
javascript中Number对象的toString()方法分析
Dec 20 Javascript
深入探寻javascript定时器
Jan 02 Javascript
jQuery实现仿淘宝带有指示条的图片转动切换效果完整实例
Mar 04 Javascript
js 打开新页面在屏幕中间的实现方法
Nov 02 Javascript
jQuery实现切换隐藏与显示同时切换图标功能
Oct 29 jQuery
javascript修改浏览器title方法 JS动态修改浏览器标题
Nov 30 Javascript
基于substring()和substr()的使用以及区别(实例讲解)
Dec 28 Javascript
js实现旋转的星空效果
Nov 01 Javascript
微信小程序定义和调用全局变量globalData的实现
Nov 01 Javascript
在实例中重学JavaScript事件循环
Dec 03 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与XML联手进行网站编程代码实例
2008/07/10 PHP
CI(CodeIgniter)框架配置
2014/06/10 PHP
tp5(thinkPHP5)框架实现多数据库查询的方法
2019/01/10 PHP
javascript下阻止表单重复提交、防刷新、防后退
2007/08/17 Javascript
MC Dialog js弹出层 完美兼容多浏览器(5.6更新)
2010/05/06 Javascript
javascript面向对象编程(一) 实例代码
2010/06/25 Javascript
Jquery练习之表单验证实现代码
2010/12/14 Javascript
js数组的操作详解
2013/03/27 Javascript
node.js中的fs.lchmod方法使用说明
2014/12/16 Javascript
使用JavaScript判断手机浏览器是横屏还是竖屏问题
2016/08/02 Javascript
js复制内容到剪贴板代码,js复制代码的简单实例
2016/10/27 Javascript
JavaScript数据结构之二叉树的计数算法示例
2017/04/13 Javascript
vue 2.1.3 实时显示当前时间,每秒更新的方法
2018/09/16 Javascript
Koa代理Http请求的示例代码
2018/10/10 Javascript
浅谈HTTP 缓存的那些事儿
2018/10/17 Javascript
微信小程序云开发修改云数据库中的数据方法
2019/05/18 Javascript
微信小程序基于Taro的分享图片功能实践详解
2019/07/12 Javascript
基于javascript实现日历功能原理及代码实例
2020/05/07 Javascript
python自动截取需要区域,进行图像识别的方法
2018/05/17 Python
python3解析库BeautifulSoup4的安装配置与基本用法
2018/06/26 Python
关于Django ForeignKey 反向查询中filter和_set的效率对比详解
2018/12/15 Python
python实现电子产品商店
2019/02/26 Python
Python3实现的旋转矩阵图像算法示例
2019/04/03 Python
使用Python opencv实现视频与图片的相互转换
2019/07/08 Python
调用其他python脚本文件里面的类和方法过程解析
2019/11/15 Python
Keras-多输入多输出实例(多任务)
2020/06/22 Python
好莱坞百老汇御用王牌美妆:Koh Gen Do 江原道
2018/04/03 全球购物
Stutterheim瑞典:瑞典高级外套时装品牌
2019/06/24 全球购物
介绍一下常见的木马种类
2014/11/15 面试题
群众路线教育实践活动实施方案
2014/10/31 职场文书
实习计划书范文
2015/01/16 职场文书
学术研讨会欢迎词
2015/01/26 职场文书
客房领班岗位职责
2015/02/11 职场文书
2015应届毕业生自荐信范文
2015/03/05 职场文书
毕业实习感受与体会
2015/05/26 职场文书
《敬重卑微》读后感3篇
2019/11/26 职场文书