javascript实现语法分色编辑器

2008-02-23 07:44:55来源:互联网 阅读 ()

新老客户大回馈,云服务器低至5折

最近一段时间忽然想到用javascript理论上可以实现一个复杂的在线编辑器,完全能够支持词法、语法方面的功能,于是试验了一下...效率和简易程度还是令人吃惊的,看来javascript比想象的还要强大...

<html>
<head>
<title>Silverna Demo Ver 0.01</title>
<style>
div.editbox{
margin:0 0 0 0;
padding:0 0 0 0;
font:16/18px Arial;
border:0px solid #000000;
}
p{
margin:0 0 0 0;
padding:0 0 0 0;
}
</style>
</head>

<body style="margin:0 0 0 0;padding:0 0 0 0;word-break:break-all;overflow-x:hidden" onload="editbox.focus()">
<div id="editbox" class="editbox" style="width:99%;height:80%;" contentEditable="true" onkeyDown="return KeyDown()" onkeyUp="KeyUp()" onclick="getCursorPosition()">
</div>
<select size="10" style="display:none;position:absolute" id="methods" onkeydown="SelectMethod()" onclick="SelMethod(this)">
</body>
</html>


</select>
<script language=JScript>
var testArray = new Array();
var testDate = new Date();
var testString = "aaa";
var testVal = 1;
var testObj = new myObj;

function myObj()
{
myObj.prototype.testFunc = function(){};
this.testProperty = "test";
}
function KeyDown()
{
//alert(event.altKey);
if(event.keyCode == 9) //TAB 键
{
clipboardData.setData('text',' ');
event.srcElement.document.execCommand('paste');
return false;
}
if(event.keyCode == 8) //Backspace 键
{
var oSel = document.selection.createRange();
var offset = event.srcElement.document.selection.createRange();
offset.moveToPoint(oSel.offsetLeft, oSel.offsetTop);
offset.moveStart('character', -4);
if(offset.text.length < 4) return true;
for (var i = 0; i < offset.text.length; i )
{
if (offset.text.charAt(i) != " ")
{
return true;
}
}
offset.select();
event.srcElement.document.execCommand('Delete');
return false;
}
return true;
}

function KeyUp()
{
var oSel, offset;
if(event.keyCode == 13)
{
testStr = event.srcElement.innerText.substring(0, getCursorPosition());
//alert(testStr);
var space = "";
for (var i = testStr.length - 1; i >= 0; i--)
{
//alert(testStr.length ":" testStr.charAt(i) ":" space.length);
if (testStr.charAt(i) == "\n") break;
if (testStr.charAt(i) == " ")
space = " ";
else
space = "";
}
//alert(testStr);
clipboardData.setData('text',space);
event.srcElement.document.execCommand('paste');
}
oSel = document.selection.createRange();
var left = oSel.offsetLeft;
var top = oSel.offsetTop;
var token = getCurrentToken(event.srcElement);
var chars = getCursorPosition();

parseSyntax(event.srcElement);
offset = event.srcElement.document.selection.createRange();
offset.moveToPoint(left, top);
offset.select();

if(event.keyCode == 190) //.键
{
setMethods(token.posTok.slice(0, -1));
}
}

function parseSyntax(src) //解析当前文本
{
var text = src.innerHTML;
text = text.replace(/<FONT[^<>]*>/gi, "").replace(/<\/FONT[^<>]*>/gi,"");
text = text.replace(/<P>/gi, "\xfe").replace(/<\/P>/gi, "\xff");
text = text.replace(/\&nbsp;/gi, "\xfd");
text = text.replace(/\r\n/gi,"");

for (var i = 0; i <SyntaxSet.All.length; i )
{
var syntaxes = SyntaxSet.All[i];
for (var j = 0; j < syntaxes.rules.All.length; j )
{
syntaxes.rules.All[j].color = syntaxes.color;
syntaxes.rules.All[j].cons = syntaxes.cons;

text = parseRule(text, syntaxes.rules.All[j]);
}
}

src.innerHTML = text.replace(/\xfc/g,"'").replace(/\xfe/g,"<P>").replace(/\xff/g,"</P>").replace(/\xfd/g,"&nbsp;");
}
function parseRule(text, rule) //解析词法
{
//利用正则表达式
var newText = "";

var idx = text.search(rule.expr);

while (idx != -1)
{
var remark = text.match(rule.expr);
//alert(text.substring(0, idx remark[0].length));
var subText = text.substring(0, idx remark[0].length);

if(rule.cons == null || (idx == 0 || rule.cons.test(text.charAt(idx-1))) && (idx remark[0].length >= text.length || rule.cons.test(text.charAt(idx remark[0].length))))
{
//alert(remark[0]);
//alert(remark[0].replace(/<FONT[^<>]*>/gi, "").replace(/<\/FONT[^<>]*>/gi,""));
subText = subText.replace(remark[0], "<FONT color=\xfc" rule.color "\xfc>" remark[0].replace(/<FONT[^<>]*>/gi, "").replace(/<\/FONT[^<>]*>/gi,"") "</FONT>");
//alert(subText);
}
newText = subText;
text = text.substring(idx remark[0].length);
idx = text.search(rule.expr);

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:自适应图片大小的弹出窗口(方法2)

下一篇:禁止Ctrl等快捷键的JS代码