html编辑器代码样式颜色效果 - 编程论坛

#2

foktime2010-08-23 17:41

关键字高亮
先设置常见的关键字字典
遍历所有的代码，在代码两边加span，然后设置颜色

#3

lele20072010-08-23 19:07

噢。。

这个明白了。。

就是有些比较特别的如html

<div class="bc">内容</div>

class="bc" 这里的内容如何来判断的？

还有asp的注释

'我是注释内容...（不管这里有多少个字。都会变灰色）

等等...一个完整的控制。。

#4

gupiao1752010-08-24 02:26

程序代码：

<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编辑器里的代码功能了，其他还有很多需要考虑的我暂时没有想到！

#5

foktime2010-08-24 08:08

这个功能需要一整套的js去实现的，自己写的话确实很累

#6

lele20072010-08-24 15:35

明白了。谢谢。

#7

lele20072010-08-25 11:33

http://bbs.

在51js帖子看到一个类似的问题，共享参考一下。