Javascript 编辑器(html版)

zoukankan html css js c++ java

Javascript 编辑器(html版)

<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="99%;height:80%;" contentEditable="true" onkeyDown="return KeyDown()" onkeyUp="KeyUp()">
</div>
<select size="10" style="display:none;position:absolute" id="methods" onkeydown="SelectMethod()" onclick="SelMethod(this)" onClick="getCursorPosition()">
</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(/\ /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," ");
}
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(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);
    }
    newText += text;
    return newText;
}

function getCurrentToken(src)
{
    var oSel = document.selection.createRange();
    var offset = src.document.selection.createRange();
    offset.moveToPoint(oSel.offsetLeft, oSel.offsetTop);
    offset.moveStart("character", -99999);

    var tokens = offset.text.split(/[\s\+\-\*\/]/); //token由连续字母数字、下划线、点号、括号、引号构成
    var currentToken = tokens[tokens.length - 1];

    var idx = offset.text.length;

    var fullToken = src.innerText.substring(idx);
    fullToken = fullToken.replace(/[\s\+\-\*\/]/,"@@@@");

    idx = fullToken.indexOf("@@@@");
    if(idx != -1)
    fullToken = fullToken.substring(0, idx);

    var token = new Array();

    token.currentToken = currentToken + fullToken;
    token.posTok = currentToken;

    return token;
}
    Array.prototype.pushDistinct = function(obj)
    {
    for (var i = 0; i < this.length; i++)
    {
    if (this[i] == obj)
    {
    return null;
    }
    }
    this.push(obj);
    return obj;
}

function putMethods(methodList, obj, methods) //将方法添加到方法列表
{
    var list = methods.split(",");

    for (var i = 0; i < list.length; i++)
    {
        if (obj[list[i]] != null)
        {
            methodList.pushDistinct(list[i]);
        }
    }
}
    var now = new Date(); //测试用
    var a = 33.3333; //测试用
    var __expr = new RegExp("tt"); //测试用
    function setMethods(objStr)
    {
    var oSel = document.selection.createRange();

    try
    {
    if (objStr == "alert") return;
    var methodList = new Array();
    var obj = eval(objStr);

    if (obj.prototype != null)
    {
    methodList.pushDistinct("prototype");
    }
    if (obj != null)
    {

    //基本Object方法
    putMethods(methodList, obj,"constructor,hasOwnProperty,isPrototypeOf,propertyIsEnumerable,toLocaleString,toString,valueOf");

    //基本Array方法
    putMethods(methodList, obj,"concat,join,length,pop,push,reverse,shift,slice,sort,splice,unshift");

    //基本Date方法
    putMethods(methodList,obj,"getDate,getUTCDate,getDay,getUTCDay,getFullYear,getUTCFullYear,getHours,getUTCHours,getMilliseconds,getUTCMilliseconds,getMinutes,getUTCMinutes,getMonth,getUTCMonth,getSeconds,getUTCSeconds,getTime,getTimezoneoffset,getYear");

    putMethods(methodList,obj,"setDate,setUTCDate,setFullYear,setUTCFullYear,setHours,setUTCHours,setMilliseconds,setUTCMilliseconds,setMinutes,setUTCMinutes,setMonth,setUTCMonth,setSeconds,setUTCSeconds,setTime,setYear,toDateString,toGMTString,toLocaleDateString,toLocaleTimeString,toString,toTimeString,toUTCString,valueOf,parse,UTC");

    //基本Math方法
    putMethods(methodList,obj,"E,LN10,LN2,LOG10E,LOG2E,PI,SQRT1_2,SQRT2");
    putMethods(methodList,obj,"abs,acos,asin,atan,atan2,ceil,cos,exp,floor,log,max,min,pow,random,round,sin,sqrt,tan");

    //基本Function方法
    putMethods(methodList,obj,"arguments,caller,length,prototype,apply,call,toString");

    //基本Number方法
    putMethods(methodList,obj,"MAX_VALUE,MIN_VALUE,NaN,NEGATIVE_INFINITY,POSITIVE_INFINITY");
    putMethods(methodList,obj,"toString,toLocalString,toFixed,toExponential,toPrecision");

    //基本RegExp方法
    putMethods(methodList,obj,"global,ignoreCase,lastIndex,multiline,source,exec,test");

    //基本String方法
    putMethods(methodList,obj,"charAt,charCodeAt,contact,indexOf,lastIndexOf,match,replace,search,slice,split,substring,substr,toLowerCase,toString,toUpperCase,valueOf,fromCharCode");
    putMethods(methodList,obj,"anchor,big,blink,bold,fixed,fontcolor,fontsize,italics,link,small,strike,sub,sup");

    }
    for (each in obj)
    {
    methodList.pushDistinct(each);
    }
    methodList.sort();

    if (methodList.length > 0)
    {
    methods.options.length = 0;
    for (var i = 0; i < methodList.length; i++)
    {
    methods.options.add(new Option(methodList[i]));
    }
    if (methods.options.length > 10)
    {
    methods.size = 10;
    }
    else
    {
    methods.size = methods.options.length;
    }
    methods.style.top = oSel.offsetTop;
    methods.style.left = oSel.offsetLeft;
    methods.style.display = "";
    methods.options[0].selected = true;
    methods.focus();
    }
    }
    catch(e){}
}

function SelectMethod()
{
var src = event.srcElement;
if(event.keyCode == 13)
{
SelMethod(src);
}

if(event.keyCode == 27 && event.keyCode == 8 && event.keyCode == 32) //---------------------------edit
{
src.style.display = "none";
editbox.focus();
}
}

function SelMethod(src)
{
clipboardData.setData('text',src.options[src.selectedIndex].text);
editbox.focus();
editbox.document.execCommand('paste');
src.style.display = "none";
getCursorPosition();
}
function getPos(text) //计算行数、列数
{
var rows = 1;
var cols = 1;
var idx = 0;
var subText = text;
while((idx = subText.indexOf("\n")) != -1)
{
subText = subText.substring(idx + 1);
rows++;
}
return new Array(rows, subText.length + 1);
}
function getNullRows(src,oSel) //计算空行
{
var rows = 0;

var offsetEnd = src.document.selection.createRange();

var oldTop = 2;
var oldLeft = 2;

while(1)
{
offsetEnd.moveToPoint(oSel.offsetLeft, oSel.offsetTop);
offsetEnd.moveStart("character",-1-rows);

if (offsetEnd.text.length > 0 && offsetEnd.offsetTop == oldTop && offsetEnd.offsetLeft == oldLeft)
{
break;
}

rows ++;
oldTop = offsetEnd.offsetTop;
oldLeft = offsetEnd.offsetLeft;
}

return rows;
}
function getCursorPosition()
{
var src = event.srcElement;
var offset = src.document.selection.createRange();
var oSel = document.selection.createRange();

var textLength = src.innerText.length;

offset.moveToPoint(oSel.offsetLeft, oSel.offsetTop);
offset.moveStart("character", -99999);
//src.document.execCommand("ForeColor",false,"#ff0000");
var rowSpans = offset.getClientRects();

var pos = getPos(offset.text);

var charCodes = offset.text.length; //字符总数
var chars = offset.text.replace(/\r\n/g,"").length + 1; //字符

var extRows = getNullRows(src,oSel);
if(extRows > 0)
{
pos[0] += extRows;
pos[1] = 1;
}
window.status = "行: " + pos[0] +", 列: " + pos[1] + ", 第 " + chars + " 个字符" + " ("+ oSel.offsetTop +","+
oSel.offsetLeft +")";
return charCodes;
}

///词法解析过程..
///..
///..

var SyntaxSet = new Array(); //词法规则集合
SyntaxSet.All = new Array();

SyntaxSet.parse = function(token) //针对token返回rule
{
for (var i = 0; i < this.All.length; i++)
{
var syntaxes = this.All[i];
for (var j = 0; j < syntaxes.rules.All.length; j++)
{
if (syntaxes.rules.All[j].test(token))
{
syntaxes.rules.All[j].color = syntaxes.color;
return syntaxes.rules.All[j];
}
}
}

return null;
}

SyntaxSet.add = function(syntaxes)
{
if(this[syntaxes.name] != null)
return;
this[syntaxes.name] = syntaxes;
this.All.push(syntaxes);
}

function Syntaxes(name, color, cons) //词法规则组（同组规则用一种颜色标记）
{
this.name = name; //规则组名称
this.color = color; //标记该语法的颜色
this.rules = new Array(); //语法规则（以次序决定优先级）
this.rules.All = new Array();
this.cons = cons; //边界约束

Syntaxes.prototype.addRule = function(rule)
{
if(this.rules[rule.name] != null)
return;
this.rules[rule.name] = rule;
this.rules.All.push(rule);
}
}

function SyntaxRule(name, regExp) //词法规则
{
this.name = name; //规则名称
this.expr = regExp; //规则描述 (正则表达式)
SyntaxRule.prototype.test = function(token)
{
return this.expr.test(token);
}
}

function RegExprX(exprStr) //扩展正则表达式的功能，支持定义嵌套
{
this.expr = exprStr;
}
RegExprX.prototype.getPattern = function(tag) //获取正则表达式对象
{
if (tag == null)
return new RegExp(this.expr);
else
return new RegExp(this.expr, tag);
}
RegExprX.prototype.concat = function(expr, rule) //连接两个正则表达式串
{
if (rule == null)
this.expr += expr; //直接连接
else if (rule == "union") //联合
this.expr = "(" + this.expr + ")" + "" + "(" + expr + ")";
else if (rule == "cons") //约束
this.expr = this.expr + "(?=" + expr + ")";
return this.expr;
}

//为保证正确计算偏移量需要替换回车\n\r为\xff
SyntaxSet.add(new Syntaxes("keywords", "#0000ff", /[\s\.\xfe\xff\xfd$\{\}$\;\,]/)); //词法?关键词?蓝色
SyntaxSet["keywords"].addRule(new SyntaxRule("Function",/function/));
SyntaxSet["keywords"].addRule(new SyntaxRule("Variable",/var/));
SyntaxSet["keywords"].addRule(new SyntaxRule("Return",/return/));
SyntaxSet["keywords"].addRule(new SyntaxRule("Exception",/(trycatchthrow)/));
SyntaxSet["keywords"].addRule(new SyntaxRule("Condition",/(ifelseswitch)/));
SyntaxSet["keywords"].addRule(new SyntaxRule("Cycle",/(forwhiledo)/));
SyntaxSet["keywords"].addRule(new SyntaxRule("Type",/(intdoublefloatvoidchar)/));
SyntaxSet["keywords"].addRule(new SyntaxRule("Right",/(publicprivateprotectedstatic)/));
SyntaxSet["keywords"].addRule(new SyntaxRule("Constant",/(nullundefinedNaNInfinity)/));
SyntaxSet["keywords"].addRule(new SyntaxRule("Construct",/(newdelete)/));

SyntaxSet.add(new Syntaxes("objects", "#FF0000", /[\s\.\xfe\xff\xfd$\{\}$\;\,]/)); //词法?对象?红色
SyntaxSet["objects"].addRule(new SyntaxRule("Object",/(ArrayargumentsBooleanDateErrorFunctionObjectNumberMathRegExpString)/));

SyntaxSet.add(new Syntaxes("global", "#800000", /[\s\.\xfe\xff\xfd$\{\}$\;\,]/)); //词法?系统函数?红色
SyntaxSet["global"].addRule(new SyntaxRule("SystemFunc",/(alertparseFloatparseIntevaldecodeURIdecodeURIComponentencodeURIencodeURIComponentescapeevalisFiniteisNaNunescape)/));

SyntaxSet.add(new Syntaxes("String", "#ff00ff", /[\s\.\xfe\xff\xfd$\{\}$\;\,\+\-\*\/]/)); //词法?字符串?粉色
SyntaxSet["String"].addRule(new SyntaxRule("String",
/('((\\\')[^\xff\'])*([^\\\'](\\\'))')("((\\\")[^\xff\"])*([^\\\"](\\\"))")/));

SyntaxSet.add(new Syntaxes("remarks", "#008000")); //词法?注释?绿色
SyntaxSet["remarks"].addRule(new SyntaxRule("ShortRemark",/\/\/[^\xff]*/));
SyntaxSet["remarks"].addRule(new SyntaxRule("LongRemark",/\/\*((.*\*\/)(.*$))/));

function Grammars() //语法规则
{
}
</script>
</body>
</html>

查看全文

相关阅读:
【Azure Developer】Windows中通过pslist命令查看到Java进程和线程信息，但为什么和代码中打印出来的进程号不一致呢？
【Azure 服务总线】详解Azure Service Bus SDK中接收消息时设置的maxConcurrentCalls，prefetchCount参数
 【Azure 应用服务】App Service站点Header头中的中文信息显示乱码？当下载文件时，文件名也是乱码？
【Azure 应用服务】Azure App Service 自带 FTP服务
 【Azure 微服务】PowerShell中，用Connect-ServiceFabricCluster命令无法连接到sf-test.chinaeast2.cloudapp.chinacloudapi.cn:19000 问题分析
 【Azure Developer】Python 获取Micrisoft Graph API资源的Access Token，并调用Microsoft Graph API servicePrincipals接口获取应用ID
【Azure Developer】Visual Studio 2019中如何修改.Net Core应用通过IIS Express Host的应用端口(SSL/非SSL)
【Azure 应用服务】Azure SignalR 是否可以同时支持近十万人在线互动
 Markedown实现
 vue-router的使用之如何让导航栏实现一种动态数据与如何实现导航栏刷新页面保持状态不变

原文地址：https://www.cnblogs.com/shengshuai/p/jseditor.html