程序代码:
<textarea id="txt" style="width:500px;height:150px;"></textarea>
<br/>
<select id="sel">
<option value='asp'>ASP</option>
<option value='js'>javascript</option>
</select>
<br/>
<input type="button" value="CHANGE" onclick="bb();"/>
<div id="div" style="width:500px;height:150px;"></div>
<script type="text/javascript">
function bb(){
var $=function(id){return document.getElementById(id).value;}
if($('txt')==""){alert('空值');return;}
txt=$('txt').replace(/</g, "<").replace(/>/g, ">");
txt="<pre><code>"+txt+"</code></pre>";
reg=/(break|delete|function|return|typeof|case|document|if|switch|var|catch|else|this|void|continue|false|instanceof|throw|while)/gim;//JS关键字高亮,可以自己添加或分类!
reg1=/(\s*\'.*)/gim;//ASP注释用的!
reg2=/(\s*\/\/.*)/gim;//javascript注释用的!
str=txt.replace(reg,'<font color="silver">$1</font>');
if($('sel')=='asp')
{str1=str.replace(reg1,'<font color="silver">$1</font>');}
else
{str1=str.replace(reg2,'<font color="silver">$1</font>');}
document.getElementById('div').innerHTML=str1;
}
</script>
核心就是正则表达式的匹配替换应用,单单一个HTML语法代码的高亮就要写十来行正则来匹配才算比较完整,这里只是说明一个思路的例子!如果要完整的还要考虑(C,VB,C#,JAVA,HTML,PHP,ASP。。。等,哦还有各种脚本,JS,PYTHON,PERL,RUBY。。。等)他们的区别,感觉非常麻烦!估计就算一个高手花几天几夜也不可能写得完整!一般的应用也就是写一些常见的关键字和注释应用,像本论坛的代码高亮就没有分各种语言的区别,统一的处理,不过对于普通应用已经足够了!
我个人认为代码高亮需求要考虑的要素有很多,主要有变量名、注释、关键字,语法!做到这4点的通用性也就足够适应HTML编辑器里的代码功能了,其他还有很多需要考虑的我暂时没有想到!