jQuery字串擷取詳解

admin發表於2018-12-31

擷取指定長度字串操作在網站建設中大量使用,尤其是在新聞列表這種型別的操作中大量應用。

下面就通過一段程式碼例項介紹一下它的實現過程。

程式碼例項如下:

[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()方法一章節。

相關文章