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

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 );
}

猜你喜欢

转载自blog.csdn.net/webfront/article/details/80741651