编写显示代码（显示行号、区别注释）js程序笔记

function showCode()
{
   var x=document.getElementsByTagName("cite");
   for(var i=0;i<x.length;i++)
   {
   var code= "<ol><li><span>";
   var childS = x[i].childNodes;
   var ifOpen=0;//确定是否打开注释
   var ifOpen1=0;//确实是否打开HTML注释
   for(var j=0; j<childS.length; j++)
  {

     if(childS[j].nodeType==1)
     {code += childS[j].tagName=="BR" ? ‘</span></li><li><span>’
:"";}
     else if(childS[j].nodeType==3)
     {var text=childS[j].nodeValue.replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g,"&quot;");
     //替换行注释
     if(text.search(/^[^(&quot;)]*///)>-1)text=text.replace(////,"<i>//")+"</i>";//此处正则是为了区别在“”中的//
     //替换/**/注释
     var temp=(ifOpen)?"<i>":""
     text=temp+text;
     if(text.search(//*/)>-1&&!ifOpen){text=text.replace(//*/,"<i>/*");ifOpen=1;}
     if(text.search(/*//)>-1&&ifOpen){text=text.replace(/*//,"*/</i>");ifOpen=0;}
     else if(ifOpen){text+="</i>";}
     //替换HTML注释
     var temp1=(ifOpen1)?"<i>":""
     text=temp1+text;
     if(text.search(/&lt;!–/)>-1&&!ifOpen1){text=text.replace(/&lt;!–/,"<i>&lt;!–");ifOpen1=1;}
     if(text.search(/–&gt;/)>-1&&ifOpen1){code+=text.replace(/–&gt;/,"–&gt;</i>");ifOpen1=0;}
     else if(ifOpen1){code+=text+"</i>";}
     else{code+=text;}
   }

   }
   code+="</span></li></ol>";
   x[i].innerHTML=code;
  }
}

最终要实现的效果，就如上面所示。主要方法是通过将<br>标签换成有序<li>标签实现，另外为了实现对注释的特殊显示，又使用了正则表达式替换，实现。

对于string的replace方法并未改变string对象本身内容，只是暂时性替换

编写的过程中遇到一个问题：使用innerHTML时IE总是显示“未知运行错误”，而火狐却运行正常，当时怎么也找不到错误，后来在网上发现如下内容：

这主要是IE在对innerHTML进行写操作的时候会检查element是否具备做为这些内容中html对象容器的要求，比如如果你是在一个p里加入包含<li>的html代码，这是会出错的。所以如果你发现这些错误出现，尝试做两件事情：

1、检查你尝试加到innerHTML的html代码是否包含破损的html标签，如没有<ul></ul>包围的<li></li>.
2、把你的容器改成那些比较“包容”的标签，如<span></span>,<div></div>

特别注意的是<tbody>,<table>,<tr>标签里面加正确格式的<td>标签都有可能出错，所以应该避免使用这些标签作为容器，必要时可以用<td>作为容器，再锲套一层表格。

仔细检查代码后才发现，cite标签嵌套在p标签内，这是不符合web标准嵌套规则的，由此可见web标准的重要性！应注意innerHTML插入的标签是否符合嵌套规则

最终使用方法：直接在页面中将要插入显示的代码包裹在<cite>标签内即可。