JavaScript实现字符串截取与点击展开功能
本文介绍如何使用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实现字符串截取及点击展开功能的完整代码,希望对大家有所帮助。
JavaScript将图片转换为Base64编码的两种途径
2026-11-05 16:43:05
怎么在 Vue 或 React 项目中正确集成 animate.js
2026-11-05 10:23:38
JS注册事件:addEventListener基础语法与参数详解
2026-11-05 08:44:56
JSP和JS的区别:运行环境与服务端/客户端职责解析
2026-11-04 23:34:36
pdf.js 官方下载地址:GitHub Release 获取预编译包
2026-11-04 23:07:27
