带回车的字符串实现段落区分和展开、收起（默认收起）功能

最新推荐文章于 2023-01-11 19:43:04 发布

原创最新推荐文章于 2023-01-11 19:43:04 发布 · 368 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#加载更多 #字符串分段落

需求整理专栏收录该内容

16 篇文章

订阅专栏

博客介绍了字符串处理相关内容，一是利用正则表达式将带回车的字符串按段落分开，分别放入p标签和span标签；二是提到了展开收起功能，但未详细说明该功能实现方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、段落区分

利用正则表达式 .replace( /(^\s*)|(\s*$)/g,"")将带回车的字符串按段落分开，放入p标签里，最后一段用span包裹。

2、展开收起功能

function init() {
                var wordsNum = 60; //默认显示字数        
                var ctn = document.getElementById("content"); //获取div对象        
                var content = ctn.innerHTML; //获取div里的内容        //alert(content);        
                var spanLabel = document.createElement("span"); //创建<span>元素        
                var aLabel = document.createElement("a"); //创建<a>元素        
                spanLabel .innerHTML = content.substring(0, wordsNum ); //span里的内容为content的前wordsNum 个字符        
                aLabel .innerHTML = content.length > wordsNum ? "... 展开" : ""; ////判断显示的字数是否大于默认显示的字数来设置a的显示                
                aLabel .href = "javascript:void(0)"; //让a链接点击不跳转        
                aLabel .onclick = function () {
                    if (aLabel .innerHTML.indexOf("展开") > 0) { //如果a 中含有"展开"则显示"收起"              
                        aLabel .innerHTML = "<<&nbsp;收起";
                        spanLabel .innerHTML = content;
                    } else {
                        aLabel .innerHTML = "... 展开";
                        spanLabel .innerHTML = content.substring(0, len);
                    }

                } // 设置div内容为空，span元素 a元素加入到div中        
                ctn.innerHTML = "";
                ctn.appendChild(spanLabel );
                ctn.appendChild(aLabel );
            }