jQuery截取指定长度字符串代码


Posted in Javascript onAugust 21, 2014

例子,截取字符串代码。

<!DOCTYPE HTML> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>jQuery截取字符串操作---3water.com</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练习之表单验证实现代码
Dec 14 Javascript
关于jquery中全局函数each使用介绍
Dec 10 Javascript
javascript 获取HTML DOM父、子、临近节点
Jun 16 Javascript
创建自己的jquery表格插件
Nov 25 Javascript
Jquery中巧用Ajax的beforeSend方法
Jan 20 Javascript
jQuery实现鼠标跟随提示层效果代码(可显示文本,Div,Table,Html等)
Apr 18 Javascript
JavaScript必知必会(五) eval 的使用
Jun 08 Javascript
Vue实现导出excel表格功能
Mar 30 Javascript
vue.js2.0 实现better-scroll的滚动效果实例详解
Aug 13 Javascript
js回调函数原理与用法案例分析
Mar 04 Javascript
JavaScript 去重和重复次数统计
Mar 31 Javascript
Vue 打包后相对路径的引用问题
Jun 05 Vue.js
jquery实现的下拉和收缩效果示例
Aug 21 #Javascript
简单的jquery左侧导航栏和页面选中效果
Aug 21 #Javascript
使用jQuery设置disabled属性与移除disabled属性
Aug 21 #Javascript
JS使用for循环遍历Table的所有单元格内容
Aug 21 #Javascript
Javascript 绘制 sin 曲线过程附图
Aug 21 #Javascript
json字符串之间的相互转换示例代码
Aug 21 #Javascript
js设置控件的隐藏与显示的两种方法
Aug 21 #Javascript
You might like
使用apache模块rewrite_module (转)
2007/02/14 PHP
PHP写日志的实现方法
2014/11/05 PHP
PHP 应用容器化以及部署方法
2018/02/12 PHP
解javascript 混淆加密收藏
2009/01/16 Javascript
fancybox modal的完美解决(右上的X)
2012/10/30 Javascript
js setTimeout 常见问题小结
2013/08/13 Javascript
jquery实现邮箱自动补全功能示例分享
2014/02/17 Javascript
谈一谈bootstrap响应式布局
2016/05/23 Javascript
AngularJS基础 ng-keypress 指令简单示例
2016/08/02 Javascript
Angular.js中$apply()和$digest()的深入理解
2016/10/13 Javascript
Angular中$broadcast和$emit的使用方法详解
2017/05/22 Javascript
微信小程序调用PHP后台接口 解析纯html文本
2017/06/13 Javascript
jquery实现限制textarea输入字数的方法
2017/09/06 jQuery
基于layui数据表格以及传数据的方式
2018/08/19 Javascript
vue props传值失败 输出undefined的解决方法
2018/09/11 Javascript
react中使用css的7中方式(最全总结)
2019/02/11 Javascript
vue组件数据传递、父子组件数据获取,slot,router路由功能示例
2019/03/19 Javascript
详解JS取出两个数组中的不同或相同元素
2019/03/20 Javascript
微信小程序 checkbox使用实例解析
2019/09/09 Javascript
JS实现简易图片自动轮播
2020/10/16 Javascript
React服务端渲染原理解析与实践
2021/03/04 Javascript
[34:44]Liquid vs TNC Supermajor 胜者组 BO3 第二场 6.4
2018/06/05 DOTA
利用Python获取赶集网招聘信息前篇
2016/04/18 Python
Python的shutil模块中文件的复制操作函数详解
2016/07/05 Python
Python基于回溯法子集树模板解决找零问题示例
2017/09/11 Python
Python爬虫常用小技巧之设置代理IP
2018/09/13 Python
10分钟理解CSS3 FlexBox弹性布局
2018/12/20 HTML / CSS
英国最好的包装供应商:Priory Direct
2019/12/17 全球购物
销售行政专员职责
2014/01/03 职场文书
兰兰过桥教学反思
2014/02/08 职场文书
大学生求职信
2014/06/17 职场文书
环境监测与治理技术专业求职信
2014/07/06 职场文书
2014年房地产个人工作总结
2014/12/20 职场文书
原告离婚代理词
2015/05/23 职场文书
2015年校医个人工作总结
2015/07/24 职场文书