欢迎来到.net学习网

欢迎联系站长一起更新本网站!QQ:879621940

您当前所在位置:首页 » Html » 正文

热门阅读

利用JavaScript实现自动排版

创建时间:2011年11月07日 22:49  阅读次数:(6941)
分享到:
在做文章发布系统时,是不是经常为文章排版烦恼。文章排版的不好阅读性太差,但手动排版经常是费时又费力,还不一定能排出好的效果。今天在一网站上发现自动排版的功能,找到他的js下载下来后发现效果真不错,贴出来供大家参考:

以下代码可现实段落自动空行,首行自动加空格,自动去掉段尾多余空格等……

JS代码:
//检查字符串是否为空
function isEmpty(myVar)
{
if (myVar.toString()=="" || myVar.length<1 || myVar==null) return true;
}

//检查e-mail
function isEmail(mail)
{
var i_email=/^[A-Za-z0-9]+([_\.-][A-Za-z0-9]+)*@[A-Za-z0-9]+([_\.-][A-Za-z0-9]+)*\.([A-Za-z]){2,4}$/i;
return i_email.test(mail);
}

//去掉字符串左右两边空格
function trim(str) {
return str.replace(/(^\s*)|(\s*$)/g,"");
}

//检查一组单旋钮或复选钮至少有一个被选中
function chkRadio(myRadio)
{
chkOK=0;
var length = myRadio.length;
for(i=0;i<length;i++)
{
if(myRadio[i].checked)
{
chkOK=1;
break;
}
}
return chkOK;
}

//得到一个字符串所占的字节数
function strlength(str)
{
    var l=str.length;
    var n=l
    for (var i=0;i<l;i++)
    {
        if (str.charCodeAt(i)<0||str.charCodeAt(i) >255) n++
    }
    return n
}

//---------------------------文章自动排版---------------------------------------------------------
function delspaceline(nr)
{
mystr = nr.value;
var mypos = 0;
var mypos2;
while((mypos1= mystr.indexOf("\r\n",mypos)) != -1)
{
mypos1 += 2;
mypos2 = mypos1;
if(mystr.substr(mypos1,2) == "\r\n")
{
mypos1 += 2;
mypos2 = mypos1;
while(mystr.substr(mypos1,2) == "\r\n")
{
mypos1 += 2;
}
}
mystr = mystr.substr(0,mypos2)+mystr.substr(mypos1);
mypos = mypos1;
}
nr.value = mystr;
}

function delspacechar(nr)
{
delspaceline(nr);
var curstr;
curstr = nr.value;
var curpos = 0;
var curpos1 = 0;
var curpos2 = 0;
var nowpos1
var s = " ";
while((curpos1 = curstr.indexOf(s,curpos)) != -1)
{
nowpos1 = 0;
curpos2 = curpos1;
curpos1 += 1;
nowpos1 += 1;
while(curstr.substr(curpos1,1) == s)
{
curpos1 += 1;
nowpos1 += 1;
}
curstr = curstr.substr(0,curpos2)+curstr.substr(curpos1);
curpos = curpos1-nowpos1;
}
var ls = " ";
var lcurpos = 0;
var lcurpos1 = 0;
var lcurpos2 = 0;
var nowpos;
while((lcurpos1 = curstr.indexOf(ls,lcurpos)) != -1)
{
nowpos = 0;
lcurpos2 = lcurpos1;
lcurpos1 += 1;
nowpos += 1;
while(curstr.substr(lcurpos1,1) == ls)
{
lcurpos1 += 1;
nowpos += 1;
}
curstr = curstr.substr(0,lcurpos2)+curstr.substr(lcurpos1);
lcurpos = lcurpos1-nowpos;
}
nr.value = curstr;
}

function autoTypeset(nr)
{
delspacechar(nr);
   str = nr.value + "\r\n";
   var pos = 0;                                   //加空格
   while((pos1 = str.indexOf("\r\n", pos)) != -1)
   {
     pos1 += 2;
    s = "";
    if(str.substr(pos, 2) != "  ")
    {
       if(str.substr(pos, 1) == " ")
         s = " ";
       else s = "  ";
    }
    str = str.substr(0, pos) + s + str.substr(pos);
    pos = pos1 + s.length;
  }
   
  while(str.substr(str.length - 2, 2) == "\r\n")  //文章后的空行不要
    str = str.substr(0, str.length - 2); 
  nr.value = str;
}


Html引用示例:
<HTML ><HEAD ><TITLE ></TITLE >
<META http-equiv=Content-Type content="text/html; charset=gb2312" >
<SCRIPT language=javascript src="files/comm_fns.js" ></SCRIPT >
</HEAD >
<BODY >
<TABLE cellSpacing=0 cellPadding=0 width=750 align=center bgColor=#fff8e6 border=0 >
  <TR vAlign=top >
    <TD >
        <FORM name=form1 onSubmit="return Validator.Validate(this,2);" 
      action=/cgi-bin/addchapter method=post target=xframe >
       <TABLE class=mtop2 cellSpacing=0 cellPadding=5 width=510 align=center 
      bgColor=#ffeec4 border=0 >
          <TBODY >
            <TR vAlign=top >
              <TD align=center class=fontzs2 ><TEXTAREA class=tdk01 name=content rows=20 cols=55 ></TEXTAREA > 
                <BR ></TD >
            </TR ></TBODY ></TABLE >
        <TABLE cellSpacing=0 cellPadding=5 width=510 align=center border=0 >
          <TBODY >
            <TR >
          <TD align=center ><INPUT 
            onclick="autoTypeset(document.form1.content);return false;" 
            type=image src="files/fban02.gif" 
          name=imageField2 ></TD >
            </TR >
            <TR >
              <TD align=center ><span class="STYLE1" >说明:</span >自动加空格,去掉多余的空行等!</TD >
            </TR >
          </TBODY ></TABLE >
        </FORM ></TD >
    </TR >
</TABLE >
</BODY ></HTML >


所有源码及示例下载请参见本站:
利用JavaScript实现文章自动排版噀Km諎<
来源:
说明:所有来源为 .net学习网的文章均为原创,如有转载,请在转载处标注本页地址,谢谢!
【编辑:Wyf

打赏

取消

感谢您的支持,我会做的更好!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

最新评论

共有评论0条
  • 暂无任何评论,请留下您对本文章的看法,共同参入讨论!
发表评论:
留言人:
内  容:
请输入问题 7+28=? 的结果(结果是:35)
结  果: