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

文章的篇幅往往不是那么恰到好处，如果以原有的篇幅展示，那么有可能会影响网页的布局或者美观度，这个时候就要根据情况适量截取一定的字符串，以适应布局，不过当点击一个按钮的时候依然可以展开全部的内容，下面就通过一个实例详细介绍一下如何实现此效果,代码示例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>字符串截取展开效果</title>
<style type="text/css">
#thediv{
 width:200px;
 margin:0px auto;
}
</style>
<script type="text/javascript">
function cutStr(){
 var odiv=document.getElementById("thediv");
 var str=odiv.innerHTML;
 var ospan=document.createElement("span");
 var olink=document.createElement("a");
 ospan.innerHTML=str.substring(0,20);
 olink.innerHTML=str.length>20?"...":"";
 olink.href="###";
 olink.onclick=function(){
  if(olink.innerHTML=="..."){
   olink.innerHTML="收起";
   ospan.innerHTML=str;
  }
  else{
   olink.innerHTML="...";
   ospan.innerHTML=str.substring(0,20);
  }
 }
 odiv.innerHTML="";
 odiv.appendChild(ospan);
 odiv.appendChild(olink);
};
window.onload=function(){
 cutStr();
}
</script>
<body>
<div id="thediv">我们欢迎您，个人的力量再强也只是一只强壮的而已，如果有分享和胸怀和合作的精神，那么就有可能活得巨大进步。</div>
</body>
</html>

以上代码实现了我们的要求，截取指定的字符串，后面以"..."结尾，当点击这个结尾的时候，能够展开所有的文字内容，下面就介绍一下此效果的实现过程。

一.实现原理:

创建一个span元素和a元素，然后使用substring()函数截取指定的字符串并将其设置为span元素的内容，然后判断原来字符串的长度是否大于指定长度，如果大于，则将a元素中的内容设置为"..."。然后将原有div清空，然后span元素和a元素添加到div中去，这样就实现了截取功能。为a元素注册时间处理函数，点击此按钮就会执行事件处理函数，此函数首先判断是出于何种状态，如果处于收起状态，那么就会将a元素中的内容设置为"收起"，并且将原有所有字符放入span，这样就实现了展开，如果出于展开状态，那么就是截取字符和修改a元素中的内容。原理大体如此，可以参阅相关阅读。

以上内容是本文给大家介绍的JavaScript截取指定长度字符串点击可以展开全部代码 ，希望大家喜欢。

赞 (0)

相关推荐

  • JS判断字符串长度的5个方法（区分中文和英文）

    目的:计算字符串长度(英文占1个字符,中文汉字占2个字符) 方法一: 复制代码 代码如下: String.prototype.gblen = function() {    var len = 0;    for (var i=0; i<this.length; i++) {      if (this.charCodeAt(i)>127 || this.charCodeAt(i)==94) {         len += 2;       } else {         len ++; 

  • 在javascript中如何得到中英文混合字符串的长度

    有同事在公司的OA上发了个贴子,介绍在javascript中如何得到中英文混合字符串的长度. 用的是正则表达式. 复制代码 代码如下: var str = "坦克是tank的音译"; var len = str.match(/[^ -~]/g) == null ? str.length : str.length + str.match(/[^ -~]/g).length ; 我查了一下书,有点明白了: 西文常用字符集由空格" "(0x20)到"~"

  • JS判断输入字符串长度实例代码(汉字算两个字符,字母数字算一个)

    js判断输入字符串长度实例代码(汉字算两个字符,字母数字算一个) 文本输入时,由于数据库表字段长度限制会导致提交失败,因此想到了此方法验证. 废话不多说上代码: <html> <head> <title>js判断输入字符串长度(汉字算两个字符,字母数字算一个)</title> <style type="text/css"> .pbt { margin-bottom: 10px; } .ie6 .pbt .ftid a, .ie

  • js如何判断输入字符串长度

    js判断输入字符串长度(汉字算两个字符,字母数字算一个) 文本输入时,由于数据库表字段长度限制会导致提交失败,因此想到了此方法验证. 废话不多说上代码: <html> <head> <title>js判断输入字符串长度(汉字算两个字符,字母数字算一个)</title> <style type="text/css"> .pbt { margin-bottom: 10px; } .ie6 .pbt .ftid a, .ie7 .p

  • js 判断计算字符串长度/判断空的简单方法

    计算字符串长度可用的三种方法: 复制代码 代码如下: echo "$str"awk '{print length($0)}' expr length "$str" echo "$str"wc -c 但是第三种得出的值会多1,可能是把结束符也计算在内了.判断字符串为空的方法有三种: 复制代码 代码如下: if [ "$str" = "" ] if [ x"$str" = x ] if [ 

  • js计算字符串长度包含的中文是utf8格式

    方法一: 复制代码 代码如下: function byteLength(str) { var byteLen = 0, len = str.length; if( !str ) return 0; for( var i=0; i<len; i++ )  byteLen += str.charCodeAt(i) > 255 ? 2 : 1; return byteLen;} 说明:byteLength(str)参数:string str: 要计算字节长度的字符串(非ASCII的字符算2字节) 方

  • JS获取字符串型数组下标的数组长度的代码

    标题页 var info = new Array(); //创建数组对象 info['name'] = '张三'; //设置数组中的一项,注意索引为字符串类型 info['age'] = '26'; //设置数组中的第二项 var i=0; for(var n in info) //遍历数组中的每一项 { i++; //用来获取数组中的元素个数 } alert("总共"+i+"个元素"); //显示数组中总共多少元素 [Ctrl+A 全选 注:如需引入外部Js需刷新

  • JavaScript实现的GBK、UTF8字符串实际长度计算函数

    大家都知道,在JS中字符串的长度不分中英文字符, 每一个字符都算一个长度,这跟PHP里的strlen()函数就不太一样.PHP里的strlen()函数根据字符集把GBK的中文每个2累加,把UTF-8的中文字符每个按3累加. 有些童鞋可能要问了,为什么要计算实际长度? 主要是为了匹配数据库的长度范围内,比如GBK的数据库某字段是varchar(10),那么就相当于5个汉字长度,一个汉字等于两个字母长度.如果是UTF8的数据库则是每个汉字长度为3. 知道了以上原理以后,我们就可以算出一个字符串的实际

  • JS控制输入框内字符串长度

    复制代码 代码如下: // 获取字符串的字节长度function len(s) {s = String(s);return s.length + (s.match(/[^\x00-\xff]/g) || "").length;// 加上匹配到的全角字符长度} function limit(obj, limit) {var val = obj.value;if (len(val) > limit) {val=val.substring(0,limit);while (len(val

  • JS判断字符串字节数并截取长度的方法

    JS判断字符串字节数并截取长度的方法

    本文实例讲述了JS判断字符串字节数并截取长度的方法.分享给大家供大家参考,具体如下: 这是在项目制作中,积累到的一个东西,感觉效果还可以,现在贴上效果: 那么,在页面上,我们需要检测两个东西,一个就是字节数,一个就是字符数. 由于数据库中,要求title的长度字节数为200,那么具体的js代码如下: /************************************************************************* * CodeBy:SCY CodeDate:20

随机推荐