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 相关文章推荐
JS OOP包机制,类创建的方法定义
Nov 02 Javascript
一些有用的JavaScript和jQuery的片段分享
Aug 23 Javascript
jQuery在html有效在jsp无效的原因及解决方法
Aug 02 Javascript
JavaScript中对象介绍
Dec 31 Javascript
jquery移动端TAB触屏切换实现效果
Dec 22 Javascript
js接收并转化Java中的数组对象的方法
Aug 11 Javascript
javascript之with的使用(阿里云、淘宝使用代码分析)
Oct 11 Javascript
jquery 仿锚点跳转到页面指定位置的实例
Feb 14 Javascript
jquery仿京东商品放大浏览页面
Jun 06 jQuery
iview给radio按钮组件加点击事件的实例
Sep 30 Javascript
vue项目设置scrollTop不起作用(总结)
Dec 21 Javascript
jQuery 选择器用法实例分析【prev + next】
May 22 jQuery
原生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制作静态网站的模板框架(二)
2006/10/09 PHP
php将fileterms函数返回的结果变成可读的形式
2011/04/21 PHP
PHP callback函数使用方法和注意事项
2015/01/23 PHP
php封装的pdo数据库操作工具类与用法示例
2019/05/08 PHP
JavaScript 继承详解(四)
2009/07/13 Javascript
javascript:void(0)使用探讨
2013/08/27 Javascript
jQuery 1.9.1源码分析系列(十)事件系统之主动触发事件和模拟冒泡处理
2015/11/24 Javascript
Sea.JS知识总结
2016/05/05 Javascript
js style.display=block显示布局错乱问题的解决方法
2016/09/21 Javascript
关于验证码在IE中不刷新的快速解决方法
2016/09/23 Javascript
JavaScript中的call和apply的用途以及区别
2017/01/11 Javascript
AngularJS实现页面定时刷新
2017/03/14 Javascript
jQuery实现字体颜色渐变效果的方法
2017/03/29 jQuery
vue项目中公用footer组件底部位置的适配问题
2018/05/10 Javascript
Vue开发实现吸顶效果的示例代码
2018/08/21 Javascript
vue实现自定义日期组件功能的实例代码
2018/11/06 Javascript
webpack4 配置 ssr 环境遇到“document is not defined”
2019/10/24 Javascript
vue 实现特定条件下绑定事件
2019/11/09 Javascript
JavaScript多种滤镜算法实现代码实例
2019/12/10 Javascript
[01:58]2018DOTA2亚洲邀请赛趣味视频——交流
2018/04/03 DOTA
Python3基础之条件与循环控制实例解析
2014/08/13 Python
Python性能优化技巧
2015/03/09 Python
详解Python中time()方法的使用的教程
2015/05/22 Python
Django使用httpresponse返回用户头像实例代码
2018/01/26 Python
python批量下载网站马拉松照片的完整步骤
2018/12/05 Python
对python指数、幂数拟合curve_fit详解
2018/12/29 Python
解决django服务器重启端口被占用的问题
2019/07/26 Python
Web前端绘制0.5像素的几种方法
2017/08/11 HTML / CSS
匡威帆布鞋美国官网:Converse美国
2016/08/22 全球购物
介绍一下HDLC(High-Level Data Link Control)高层数据链路协议
2012/01/21 面试题
网上常见的一份Linux面试题(多项选择部分)
2015/02/07 面试题
办公自动化专业大学生职业规划书
2014/03/06 职场文书
服装仓管员岗位职责
2014/06/17 职场文书
党委干部批评与自我批评发言稿
2014/09/28 职场文书
医院办公室主任岗位职责
2015/04/01 职场文书
导游词之吉林花园山
2019/10/17 职场文书