`
lokepaqi
  • 浏览: 46046 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

js按宽度截取字符串。

 
阅读更多
String.prototype.getBytes = function() {   
    var totalLen = 0;     
    var charCode;  
    for (var i = 0; i < this.length; i++) {  
        charCode = this.charCodeAt(i);  
        if (charCode < 0x007f)  {     
            totalLen++;     
        } else if ((0x0080 <= charCode) && (charCode <= 0x07ff))  {     
            totalLen += 2;     
        } else if ((0x0800 <= charCode) && (charCode <= 0xffff))  {     
            totalLen += 3;   
        } else{  
            totalLen += 4;   
        }          
    }  
    return totalLen;   
};

String.prototype.subStringBytes = function(len) {
    var i = 0;
    var readBytes = 0;
    var charCode;  
    for (i = 0; i < this.length && readBytes <= len ; i++) {  
        charCode = this.charCodeAt(i);  
        if (charCode < 0x007f)  {     
        	readBytes++;     
        } else{
        	readBytes += 2;   
        }
    }
    if(i==this.length){
    	return this.substring(0, i);
    }
    return this.substring(0, i)+"...";   
};

$(function(){
	$("a.subStringBytes").each(function(){
		var len = $(this).parent().attr("offsetWidth");
		var html = $.trim($(this).text());
		var newHtml = '';
		var suffix = false;
		for(var j=0;j<html.length;j++){  
			newHtml += html.charAt(j);
		    $(this).text(newHtml);  
		    if($(this).attr("offsetWidth")>(len-70)){ 
		    	suffix = true;
		        break;  
		    }  
		} 
		if(suffix){
			newHtml += '...';
		}
		$(this).html(newHtml);
	});
	$("div.subStringBytes").each(function(){
		doSubString(this);
	});
	$("td.subStringBytes").each(function(){
		doSubString(this);
	});
	$("span.subStringBytes").each(function(){
		doSubString(this);
	});
});

function doSubString(obj){
	var len = $(obj).attr("offsetWidth");
	var html = $.trim($(this).html());
	var newHtml = '';
	var suffix = false;
	for(var j=0;j<html.length;j++){  
		newHtml += html.charAt(j); 
	    $(obj).html(newHtml);  
	    if($(obj).attr("offsetWidth")>(len-70)){ 
	    	suffix = true;
	        break;  
	    }  
	} 
	if(suffix){
		newHtml += '...';
	}
	$(obj).html(newHtml);
}
分享到:
评论

相关推荐

    css截取字符串简单实例

    标题中提到的“css截取字符串”实际上是关于在Web前端开发中如何利用CSS的特性来实现文本截断的效果。在这里,CSS并非传统意义上的编程语言,它不具备直接截取字符串的功能,但它可以通过一些属性来控制文本的显示,...

    Js字符串操作函数大全(更新)

    除了空格处理外,有时还需要截取字符串的一部分,例如在显示文章摘要时只显示部分内容。 - **Left 方法**:此方法返回字符串左边指定长度的子串。 ```javascript String.prototype.Left = function (len) { if ...

    CSS3截取字符串实例代码【推荐】

    通常,我们使用JavaScript或后端语言来截取字符串,但CSS3也提供了一种方法来实现这一功能。这种方法的优点在于,它可以在不涉及额外脚本的情况下,仅通过样式控制来实现文本的截取。接下来,我们将深入探讨如何使用...

    Jquery截取中文字符串的实现代码

    总之,`cut_str()`函数展示了如何在JavaScript或jQuery环境中正确处理包含中文字符的字符串截取,确保截取的结果不会出现乱码或丢失部分字符。在实际开发中,这样的函数对于处理多语言文本尤其重要,特别是涉及到...

    php,js,css字符串截取的办法集锦

    在这里,`$str`是要截断的字符串,`$start`指定了从第几个字符开始截取,默认是从0开始,`$width`是所需的截取宽度,`$trimmarker`是截取后在字符串末尾添加的内容,默认为空字符串,而`$encoding`是字符串的编码,...

    JS实现含有中文字符串的友好截取功能分析

    在显示字符串的时候,避免字符串过长往往会对字符串进行截取操作,通常会用到js 的 substr 或者 substring方法, 以及 字符串的length属性 对于非中文的字符串处理是很简单的,但是中文字符的 length 属性值 是1 而...

    JavaScript截取指定长度字符串点击可以展开全部代码

    具体到实现截取字符串并可点击展开的步骤,流程如下: - 首先获取需要操作的HTML元素,比如一个div元素,这里假设其id为thediv。 - 读取该元素的innerHTML属性,以获取其包含的完整内容。 - 使用substring()方法...

    实例76_字符串相关_自动填充.rar_实例字符串

    在实际应用中,字符串自动填充还常常结合其他字符串操作,如查找替换、截取、连接等,来实现更复杂的文本处理需求。例如,在数据库操作中,自动填充常用于确保字段值满足规定的长度要求;在网络编程中,URL编码也...

    JS常用字符串方法(推荐)

    7. `slice(start, end)`:截取字符串的一部分,返回一个新的字符串。`start`和`end`分别表示开始和结束的索引,不包括`end`。如果`end`未提供,将截取到字符串末尾。 8. `substr(start, length)`:类似于`slice()`...

    ext-grid+json简单应用

    在IT行业中,EXT-JS是一个流行的JavaScript库,用于构建富客户端Web应用程序。EXT-JS的Grid组件是一个强大的数据展示工具,它可以显示大量数据并提供多种交互功能。在"EXT-GRID+JSON简单应用"中,我们将探讨如何使用...

    精通正则表达式基于.NET ASP PHP JSP JavaScript

    从中截取字符串.asp 从中截取字符串 切分字符串.asp 切分字符串 删除字符串前后导空格.asp 删除字符串前导空格.asp 删除字符串后导空格.asp 反向截取字符串.asp ...

    JavaScript 字符串数字左补位,右补位,取固定长度,截位扩展函数代码

    除了补位,有时我们需要截取字符串的一部分,这里提供了一个Java的`subString`函数示例,它根据起始位置和长度返回子字符串: ```java public String subString(String oriStr, int beginIndex, int len) { int ...

    让很多内容只显示一部分,然后点击展开显示全部

    新闻内容,只显示部分,点击展开,可以显示全部新闻内容,点击收起,可以改变为只显示部分内容,通过JS截取字符串实现。

    JS字符串函数扩展代码

    标题《JS字符串函数扩展代码》和描述《JS字符串函数扩展代码,大家可以参考下prototype的使用方法,扩展自己的字符串处理函数。》提示了本文档旨在向JavaScript开发人员介绍如何利用原型(prototype)扩展JavaScript...

    js处理包含中文的字符串实例

    最后,`limitlen`函数用于截取字符串,使其显示长度不超过指定的限制。 然而,这种方法仅适用于基本的Unicode字符。为了更准确地处理各种Unicode编码的中文字符,我们可以利用中文的Unicode编码范围。中文字符的...

    js图片截取、缩放、文字选取.zip

    本压缩包"js图片截取、缩放、文字选取.zip"包含了一系列与JavaScript相关的实用技术,主要集中在图像处理和文本操作上。以下是这些功能的详细说明: 1. **js图片剪裁**: 图片剪裁是Web应用中常见的功能,允许用户...

    js常用的串操作,很多例子

    ### JS常用的字符串操作详解 在JavaScript编程中,字符串操作是非常基础且重要的部分。本文将详细介绍一个包含多个实用字符串处理函数的代码片段,并对每个函数的功能、实现原理进行深入解析。 #### 1. 计算字符串...

    javascript中使用正则计算中文长度的例子

    在中文和英文混合的文本中,由于中文字符宽度通常大于英文字符宽度,若按英文字符宽度截取中文字符,或按中文字符宽度截取英文字符,很可能会导致显示效果不佳。例如,截取一个昵称时,如果使用英文的标准截取方式,...

    JS函数大全及使用方法实例

    其中,`substr`和`substring`是原生JavaScript提供的函数,用于截取字符串。 #### 3. 查找子字符串 在字符串中查找特定子字符串的位置也是常见的需求,`InStr`和`InStrRev`函数分别用于正向和反向查找。 ```...

Global site tag (gtag.js) - Google Analytics