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模仿的a的title属性(兼容ie6/7)
Jan 21 Javascript
jquery内置验证(validate)使用方法示例(表单验证)
Dec 04 Javascript
QQ登录背景闪动效果附效果演示源码下载
Sep 22 Javascript
ES6中的数组扩展方法
Aug 26 Javascript
浅谈Angularjs link和compile的使用区别
Oct 21 Javascript
video.js使用改变ui过程
Mar 05 Javascript
angularjs项目的页面跳转如何实现(5种方法)
May 25 Javascript
vue.js语法及常用指令
Oct 29 Javascript
JS实现的邮箱提示补全效果示例
Jan 30 Javascript
JavaScript实现微信红包算法及问题解决方法
Apr 26 Javascript
微信小程序实现分享到朋友圈功能
Jul 19 Javascript
vue 动态创建组件的两种方法
Dec 31 Vue.js
原生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学习笔记之数组篇
2011/06/28 PHP
php超快高效率统计大文件行数
2015/07/05 PHP
js 编写规范
2010/03/03 Javascript
jquery中one()方法的用法实例
2015/01/16 Javascript
Javascript 正则表达式实现为数字添加千位分隔符
2015/03/10 Javascript
jQuery validate验证插件使用详解
2016/05/11 Javascript
Bootstrap3学习笔记(二)之排版
2016/05/20 Javascript
jQuery解析与处理服务器端返回xml格式数据的方法详解
2016/07/04 Javascript
JS正则表达式学习之贪婪和非贪婪模式实例总结
2016/12/26 Javascript
JavaScript学习总结之正则的元字符和一些简单的应用
2017/06/30 Javascript
Grunt针对静态文件的压缩,版本控制打包的实例讲解
2017/09/29 Javascript
JS运动特效之同时运动实现方法分析
2018/01/24 Javascript
详解如何在nuxt中添加proxyTable代理
2018/08/10 Javascript
JavaScript实现简单的隐藏式侧边栏功能示例
2018/08/31 Javascript
javascript实现blob加密视频源地址的方法
2019/08/08 Javascript
vue实现抽屉弹窗效果
2020/11/15 Javascript
Vue3+elementui plus创建项目的方法
2020/12/01 Vue.js
[44:26]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#4EG VS Fnatic第二局
2016/03/03 DOTA
[20:39]DOTA2-DPC中国联赛 正赛开幕式 1月18日
2021/03/11 DOTA
进一步探究Python的装饰器的运用
2015/05/05 Python
浅谈Python的文件类型
2016/05/30 Python
django文档学习之applications使用详解
2018/01/29 Python
情人节快乐! python绘制漂亮玫瑰
2020/08/18 Python
Python爬虫学习之翻译小程序
2019/07/30 Python
Anaconda3+tensorflow2.0.0+PyCharm安装与环境搭建(图文)
2020/02/18 Python
Python模拟FTP文件服务器的操作方法
2020/02/18 Python
解决PyCharm无法使用lxml库的问题(图解)
2020/12/22 Python
一些Solaris面试题
2015/12/22 面试题
工业设计专业个人求职信范文
2013/12/28 职场文书
产品开发计划书
2014/04/27 职场文书
施工安全汇报材料
2014/08/17 职场文书
审计班子对照检查材料
2014/08/27 职场文书
幼儿园园长工作总结2015
2015/05/25 职场文书
大学生,三分钟即兴演讲稿
2019/07/22 职场文书
java Nio使用NioSocket客户端与服务端交互实现方式
2021/06/15 Java/Android
Win11怎样将锁屏账户头像图片改成动画视频
2021/11/21 数码科技