js实现中文之间的代码模式视图，

js实现中文之间的代码模式视图，理想的效果是Dreamweaver里面的代码视图那样，应该怎么实现，是不是要用到正则表达式请教！
劳烦多注释一下，感谢万分！
<!doctype html>
<html>
<head>
<meta charset="gb2312">
<title></title>
<style>
code { display:block; border:1px dashed #CCCCCC; background:#EEE; line-height:20px; padding:0 10px;}
code span.code_function { font-weight:bolder; color:black;}
code span.code_var { font-weight:bolder; color: #06C;}
code span.code_return { font-weight:bolder; color: #06C;}
code span.code_brackets_1_1 { font-weight:bolder; color: #06C;}
</style>
<script src="http://jhi.me/source/global.js"></script>
</head><body>
<script>
function jhi_code(){
var codes = document.getElementsByTagName("code");
for(var i = 0; i < codes.length; i++){
var codeText = codes[i].innerHTML;
codeText = "<pre>" + codeText + "</pre>";
codeText = codeText.replace(/function/g,"<span class='code_function'>function</span>");
codeText = codeText.replace(/var/g,"<span class='code_var'>var</span>");
codeText = codeText.replace(/return/g,"<span class='code_return'>return</span>");
codeText = codeText.replace(/{/g,"<span class='code_brackets_1_1'>{</span>");
codeText = codeText.replace(/}/g,"<span class='code_brackets_1_1'>}</span>");
codes[i].innerHTML = codeText;
}
}addLoadEvent(jhi_code);
</script><p>JavaScriptJavaScriptJavaScript</p>
<p>JavaScriptJavaScriptJavaScriptJavaScriptJavaScriptJavaScriptJavaScriptJavaScript</p>
<p>&nbsp;</p>
<code class="code">
function initAll(){
    var lis = document.getElementById("ul").getElementsByTagName("li");
    for(var i = 0; i < lis.length; i++){
        addClass(lis[i],"li" + (i + 1))
    }
}
function initNav(){
    var wrap = document.getElementById("wrap");
    var nav = document.getElementById("nav");
    nav.style.top = "365px";
    nav.style.left = "-100px";
    window.onscroll = function(){
        //alert("100+");
    }
    //alert("test");
}
addLoadEvent(initAll);
addLoadEvent(initNav);
</code>
<p>JavaScriptJavaScriptJavaScript</p>
<p>JavaScriptJavaScriptJavaScriptJavaScriptJavaScriptJavaScriptJavaScriptJavaScript</p>
</body>
</html>

解决方案 »

  1.   

    写个正则把<替换为&lt;，>替换为&gt;
      

  2.   

    把你的代码改了改，看看有帮助吗
    是在IE上做的
    <!doctype html>
    <html>
    <head>
    <meta charset="gb2312">
    <title></title>
    <style> 
     code { display:block; border:1px dashed #CCCCCC; background:#EEE; line-height:20px; padding:0 10px; overflow:scroll}
     code span.code_function { font-weight:bolder; color:black;}
     code span.code_var { font-weight:bolder; color: #06C;}
     code span.code_return { font-weight:bolder; color: #06C;}
     code span.code_brackets_1_1 { font-weight:bolder; color: #06C;}
     code span.code_commentary { color: #666;}
     </style>
    <script src="http://jhi.me/source/global.js"></script>
    </head>
    <body>
    <script>
    function jhi_code(){     
    var codes = document.getElementsByTagName("code");     
    for(var i = 0; i < codes.length; i++){     
    var codeText = codes[i].innerHTML;     
    codeText = codeText.replace(/\>/g,"&gt;");     
    codeText = codeText.replace(/\</g,"&lt;");     
    codeText = "<pre>" + codeText + "</pre>";     
    codeText = codeText.replace(/function/g,"<span class='code_function'>function</span>");     
    codeText = codeText.replace(/var/g,"<span class='code_var'>var</span>");     
    codeText = codeText.replace(/return/g,"<span class='code_return'>return</span>");     
    codeText = codeText.replace(/(\/\/.*?\;)/g,"<span class='code_commentary'>$1</span>");     
    codeText = codeText.replace(/{/g,"<span class='code_brackets_1_1'>{</span><div style='padding: 0 20px'>");     
    codeText = codeText.replace(/}/g,"</div><span class='code_brackets_1_1'>}</span><br>");
    codeText = codeText.replace(/\;/g,";<br>"); 
    codeText = codeText.replace(/\<br\>(?=[^\(]+\))/g,"");
    codes[i].innerHTML = codeText;     
    }
     }
       addLoadEvent(jhi_code); 
    </script>
    <p>JavaScriptJavaScriptJavaScript</p>
    <p>JavaScriptJavaScriptJavaScriptJavaScriptJavaScriptJavaScriptJavaScriptJavaScript</p>
    <p>&nbsp;</p>
    <code class="code"> 
    function initAll(){     
    var lis = document.getElementById("ul").getElementsByTagName("li");     
    for(var i = 0; i < lis.length; i++){     
        addClass(lis[i],"li" + (i + 1))
    }
     }
     function initNav(){     
    var wrap = document.getElementById("wrap");     
    var nav = document.getElementById("nav");     
    nav.style.top = "365px";     
    nav.style.left = "-100px";     
    window.onscroll = function(){     
        //alert("100+");     
    }
         
    //alert("test"); }
     addLoadEvent(initAll); addLoadEvent(initNav); </code>
    <p>JavaScriptJavaScriptJavaScript</p>
    <p>JavaScriptJavaScriptJavaScriptJavaScriptJavaScriptJavaScriptJavaScriptJavaScript</p>
    </body>
    </html>