jQuery字串擷取詳解
擷取指定長度字串操作在網站建設中大量使用,尤其是在新聞列表這種型別的操作中大量應用。
下面就通過一段程式碼例項介紹一下它的實現過程。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <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 src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <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) + "..."),擷取指定長度字串,超出的用省略號代替。
三.相關閱讀:
(1).each()參閱jQuery each()方法一章節。
(2).attr()參閱jQuery attr()方法一章節。
相關文章
- Linux下的字串擷取詳解Linux字串
- sql常用函式詳解(一)——字串擷取SQL函式字串
- 字串擷取字串
- PHP字串擷取PHP字串
- php字串擷取函式,支援中文擷取PHP字串函式
- jQuery實現的擷取指定長度字串程式碼jQuery字串
- MySQL 字串函式:字串擷取MySql字串函式
- php中英字串擷取PHP字串
- iOS擷取NSString字串iOS字串
- Mysql字串擷取函式MySql字串函式
- PHP 查詢、擷取字串函式詳解PHP字串函式
- jQuery 擷取字串以省略號替代jQuery字串
- iOS NSString字串擷取方法iOS字串
- shell 擷取變數的字串變數字串
- JavaScript 擷取指定指定區間字串JavaScript字串
- Shell中的字串擷取介紹字串
- php 擷取中英文混合字串PHP字串
- C#常用字串擷取C#字串
- shell 使用陣列及字串擷取陣列字串
- Swift 4.0 字串擷取,拼接,字串富文字顯示Swift字串
- javascript擷取指定指定區間的字串JavaScript字串
- swift 字串學習 (index用法和擷取)Swift字串Index
- iOS擷取特定的字串(正則匹配)iOS字串
- php 如何擷取中文字串PHP字串
- Linux shell指令碼的字串擷取Linux指令碼字串
- jQuery擷取字串外掛區分中英文jQuery字串
- Linux最常見的4個擷取命令詳解!Linux
- 字串擷取 slice,substr,substring 的區別字串
- MySQL 字串擷取相關函式總結MySql字串函式
- js字串擷取函式slice()、substring()、substr()JS字串函式
- 擷取字串字串
- Javascript之字串擷取函式slice()、substring()、substr()JavaScript字串函式
- css實現的字串擷取程式碼例項CSS字串
- 對url字串中域名的三種擷取方式字串
- javascript擷取指定長度字串相容中英文JavaScript字串
- 包含中文的字串中擷取前N個字元字串字元
- ***PHP各種編碼的漢字字串擷取PHP字串
- 字串擷取從前幾位到後幾位字串