JS實現(xiàn)中英文混合文字溢出友好截取功能

更新時間：2018年08月06日 17:05:17 作者：抖音

這篇文章主要介紹了JS實現(xiàn)中英文混合文字溢出友好截取功能,通常會用到j(luò)s的 substr 或者 substring方法, 以及字符串的length屬性。需要的朋友可以參考下

在顯示字符串的時候，避免字符串過長往往會對字符串進(jìn)行截取操作，通常會用到j(luò)s的 substr 或者 substring方法, 以及字符串的length屬性

substr() 方法可在字符串中抽取從 start 下標(biāo)開始的指定數(shù)目的字符。

substring() 方法用于提取字符串中介于兩個指定下標(biāo)之間的字符。

對于非中文的字符串處理是很簡單的，但是中文字符的 length 屬性值是1 而不是 2 ，所以處理就不是很友好了。

例如你有一個字符串 'abcdefg' 和 '我愛中華人民共和國'

你只想顯示五位長度，往往會這樣操作 str = str.substr(0, 5);

但是 'abcde '與 '我愛中華人' 所占的寬度是不同的，因為中文往往占2字節(jié), 為了顯示效果更好，特封裝如下函數(shù):

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>JS實現(xiàn)中英文混合文字溢出友好截取功能</title>
</head>
<body>
<script>
 /**
  * JS實現(xiàn)中英文混合文字溢出友好截取功能
  * @param text 字符串
  * @param length 截取長度
  */
 var zfc = {};
 zfc.mixTextOverflow = function (text, length) {
  if (text.replace(/[\u4e00-\u9fa5]/g, 'aa').length <= length) {
   return text
  } else {
   var _length = 0
   var outputText = ''
   for (var i = 0; i < text.length; i++) {
    if (/[\u4e00-\u9fa5]/.test(text[i])) {
     _length += 2
    } else {
     _length += 1
    }
    if (_length > length) {
     break
    } else {
     outputText += text[i]
    }
   }
   return outputText + '...'
  }
 }
 console.log(zfc.mixTextOverflow('留學(xué)NEW SAT essay 題目分析和匯總', 12))
</script>
</body>
</html>

　輸出結(jié)果:

總結(jié)

以上所述是小編給大家介紹的JS實現(xiàn)中英文混合文字溢出友好截取功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

相關(guān)文章

基于wordpress的ajax寫法詳解
下面小編就為大家分享一篇基于wordpress的ajax寫法詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-01-01
countUp.js實現(xiàn)數(shù)字動態(tài)變化效果
這篇文章主要為大家詳細(xì)介紹了countUp.js實現(xiàn)數(shù)字動態(tài)變化效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2019-10-10
給網(wǎng)頁加個彩色窗口
給網(wǎng)頁加個彩色窗口...
2006-07-07
javaScript 刪除字符串空格多種方法小結(jié)
在js中自一些字符串刪除空格的功能，本文章來介紹了字符串刪除功能加利用正則快速替換字符串中所有空格實現(xiàn)代碼
2012-10-10
javascript自定義滾動條實現(xiàn)代碼
這篇文章主要為大家詳細(xì)介紹了javascript自定義滾動條實現(xiàn)代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-02-02
微信小程序支付功能完整流程記錄(前端)
微信小程序的商戶系統(tǒng)一般是以接口的形式開發(fā)的,小程序通過調(diào)用與后端約定好的接口進(jìn)行參數(shù)的傳遞以及數(shù)據(jù)的接收,下面這篇文章主要給大家介紹了關(guān)于微信小程序支付功能(前端)的相關(guān)資料,需要的朋友可以參考下
2023-02-02
JavaScript實現(xiàn)翻轉(zhuǎn)圖片的三種方法小結(jié)
有時,我們可能需要翻轉(zhuǎn)Web應(yīng)用中的媒體元素,所以這篇文章小編為大家詳細(xì)介紹了三種使用JavaScript翻轉(zhuǎn)圖片的方法,希望對大家有所幫助
2024-01-01
理解javascript模塊化
這篇文章主要幫助大家深入理解javascript模塊化，感興趣的小伙伴們可以參考一下
2016-03-03
Mvc提交表單的四種方法全程詳解
本文給大家介紹mvc提交表單的四種方法，分別是MVC HtmlHelper方法，傳統(tǒng)Form表單Aciton屬性提交，Jquery+Ajax 提交表單，MVC Controller控制器和表單參數(shù)傳遞，介紹的非常詳細(xì)，需要的朋友參考下
2016-08-08
微信小程序開發(fā)之錄音機(jī) 音頻播放動畫實例 (真機(jī)可用)
這篇文章主要介紹了微信小程序開發(fā)之錄音機(jī) 音頻播放動畫實例 (真機(jī)可用)，這里整理了詳細(xì)的代碼,有需要的小伙伴可以參考下。
2016-12-12