JavaScript实现字符串截取与点击展开功能

作者:流萤时间:2026-10-29 18:26:34浏览:497

本文介绍如何使用JavaScript截取指定长度的字符串,并通过点击链接展开或收起完整内容。核心逻辑包括创建span和a元素,利用substring截取文本,监听点击事件切换显示状态,适用于优化网页布局。

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实现字符串截取及点击展开功能的完整代码,希望对大家有所帮助。

作者最新文章