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 相关文章推荐
js实现运行代码需要刷新的解决方法
Aug 18 Javascript
[原创]js获取数组任意个不重复的随机数组元素
Mar 15 Javascript
IE6 hack for js 集锦
Sep 23 Javascript
原生JavaScript编写俄罗斯方块
Mar 30 Javascript
JavaScript中isPrototypeOf函数作用和使用实例
Jun 01 Javascript
原生js的数组除重复简单实例
May 24 Javascript
JS判断日期格式是否合法的简单实例
Jul 11 Javascript
JS仿淘宝搜索框用户输入事件的实现
Jun 19 Javascript
js脚本编写简单刷票投票系统
Jun 27 Javascript
webpack配置打包后图片路径出错的解决
Apr 26 Javascript
Canvas实现微信红包照片效果
Aug 21 Javascript
微信小程序之导航滑块视图容器功能的实现代码(简单两步)
Jun 19 Javascript
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
PHP 设计模式之观察者模式介绍
2012/02/22 PHP
非常精妙的PHP递归调用与静态变量使用
2012/12/16 PHP
php站内搜索关键词变亮的实现方法
2014/12/30 PHP
PHP7 字符串处理机制修改
2021/03/09 PHP
用htc组件制作windows选项卡
2007/01/13 Javascript
火狐浏览器(firefox)下获得Event对象以及keyCode
2008/11/13 Javascript
Jquery乱码的一次解决过程 图解教程
2010/02/20 Javascript
javascript 学习笔记(一)DOM基本操作
2011/04/08 Javascript
基于JQuery的模拟苹果桌面Dock效果(稳定版)
2012/10/15 Javascript
JS打开层/关闭层/移动层动画效果的实例代码
2013/05/11 Javascript
按钮接受回车事件的三种实现方法
2014/06/06 Javascript
详解JavaScript中数组的reduce方法
2016/12/02 Javascript
Javascript实现base64的加密解密方法示例
2017/06/27 Javascript
基于Vue实例生命周期(全面解析)
2017/08/16 Javascript
Vue中的基础过渡动画及实现原理解析
2018/12/04 Javascript
vue动态循环出的多个select出现过的变为disabled(实例代码)
2019/11/10 Javascript
vue使用微信扫一扫功能的实现代码
2020/04/11 Javascript
解决vue axios跨域 Request Method: OPTIONS问题(预检请求)
2020/08/14 Javascript
Python3基础之基本运算符概述
2014/08/13 Python
简单的Python的curses库使用教程
2015/04/11 Python
Python逐行读取文件中内容的简单方法
2019/02/26 Python
python的pip有什么用
2020/06/17 Python
python怎么自定义捕获错误
2020/06/29 Python
python利用线程实现多任务
2020/09/18 Python
python中round函数保留两位小数的方法
2020/12/04 Python
HTML5+CSS3 诱人的实例:3D立方体旋转动画实例
2016/12/30 HTML / CSS
详解html5 canvas常用api总结(二)--绘图API
2016/12/14 HTML / CSS
html5小程序飞入购物车(抛物线绘制运动轨迹点)
2020/10/19 HTML / CSS
神路信息Java面试题目
2013/03/31 面试题
信用社员工先进事迹材料
2014/02/04 职场文书
人事任命书范文
2014/06/04 职场文书
文明倡议书
2015/01/19 职场文书
2015年部门工作总结范文
2015/03/31 职场文书
2015年仓管员工作总结
2015/04/21 职场文书
2015年科普工作总结
2015/07/23 职场文书
TypeScript中条件类型精读与实践记录
2021/10/05 Javascript