欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

代码关键词高亮原理实验

程序员文章站 2022-05-28 22:28:35
...

这是我自己做的一个JS IDE,全部用HTML5+CSS3+JS实现,有代码关键词自动高亮显示功能,所写的内容可以保存为文件,也可以导入文件进来。

代码关键词高亮原理实验


<!DOCTYPE html>
<HTML>

<HEAD>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0, user-scalable=no"/>
<TITLE>JSIDE - Designed by Bean Lea</TITLE>

<STYLE TYPE="TEXT/CSS">

body,html{
	height:100%;
	font-size:14px;
	margin:0px;
	padding:0px;
	background-color:rgba(63,63,63,1);
	
}
.maindiv{
	width:100%;
	padding:0px;
	margin:auto;

}

#outputdisplay{
	position:absolute;
	display:inline-block;
	margin-top:3.5em;
	padding:0px;
	width:100%;
	height:100%;
	color:#ffffff;
	background-color:rgba(63,63,63,1);
	overflow:visible;	
	font-family:"Arial";
}
#inputdisplay{
	position:absolute;
	display:inline-block;
	margin-top:3.5em;
	padding:0px;
	width:100%;
	height:100%;
	color:rgba(0,0,0,0);
	background-color:rgba(127,0,0,0);
	caret-color:white;
	overflow:visible;
	font-family:"Arial";
}

pre{
	margin:0px;
	padding:0px;
	font-family:"Arial";
}

.highlight{
	color:#ff0000;
}

.menudiv{
	position:fixed;
	top:0px;
	background-color:rgba(127,200,127,0.8);
	width:100%;
	height:2em;
	padding:0.5em;
	box-shadow:0px 0px 1em rgba(255,255,255,0.3);
}
label{
	color:white;
}
button{
	color:gray;
	background-color:rgba(127,255,127,0.8);
	border-radius:0.5em;
}
#file{
	display:none;
}
#filenamediv{
	position:fixed;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	background-color:rgba(127,255,127,0.5);
	display:none;
	
}
.filenameinput{
	width:20em;
	margin:auto;
	margin-top:5em;
	background-color:#ff6666;
	padding:1em;
	border-radius:0.5em;
	box-shadow:0px 0px 3em rgba(0,0,0,0.3);
	
	
}
#filename{
	width:15em;
	border-radius:0.5em;
	
}
</STYLE>

<SCRIPT TYPE="TEXT/JAVASCRIPT">
/*
	本程序由冰豆小李编写
*/

//js关键词高亮颜色
var colorMap={
	"abstract":"aqua",
	"arguments":"blue",
	"boolean":"blueviolet",
	"break":"chartreuse",
	"byte":"chocolate",
	"case":"coral",
	"catch":"cornflowerblue",
	"char":"cornsilk",
	"class":"crimson",
	"const":"cyan",
	"continue":"darkcyan",
	"debugger":"darkgoldenrod",
	"default":"darkgray",
	"delete":"darkgreen",
	"do":"darkkhaki",
	"double":"darkmagenta",
	"else":"darkolivegreen",
	"enum":"darkorange",
	"eval":"darkorchid",
	"export":"darkred",
	"extends":"darksalmon",
	"false":"darkseagreen",
	"final":"darkturquoise",
	"finally":"deeppink",
	"float":"deepskyblue",
	"for":"dodgerblue",
	"function":"red",
	"goto":"firebrick",
	"if":"forestgreen",
	"implements":"fuchsia",
	"import":"gold",
	"in":"goldenrod",
	"instanceof":"green",
	"int":"greenyellow",
	"interface":"hotpink",
	"let":"indianred",
	"long":"khaki",
	"native":"lavenderblush",
	"new":"lawngreen",
	"null":"lightblue",
	"package":"lightgreen",
	"private":"lightpink",
	"protected":"lightsalmon",
	"public":"lightseagreen",
	"return":"lightskyblue",
	"short":"lightslateblue",
	"static":"lime",
	"super":"limegreen",
	"switch":"linen",
	"synchronized":"magenta",
	"this":"maroon",
	"throw":"mediumaquamarine",
	"throws":"mediumorchid",
	"transient":"mediumseagreen",
	"true":"mediumturquoise",
	"try":"mediumvioletred",
	"typeof":"mediumvioletred",
	"var":"mistyrose",
	"void":"organge",
	"volatile":"orangered",
	"while":"orchid",
	"with":"palevioletred",
	"yield":"peachpuff",	
	"+":"red",
	"-":"red",
	"*":"red",
	"/":"red",
	"=":"red",
	"(":"red",
	")":"red",
	"{":"red",
	"}":"red",
	"[":"red",
	"]":"red",
	"|":"red",
	"\"":"red",
	"'":"red"
}

//保存文件
function createAndDownloadFile(fileName, content) {
    var aTag = document.createElement('a');
    var blob = new Blob([content]);
    aTag.download = fileName;
    aTag.href = URL.createObjectURL(blob);
    aTag.click();
    URL.revokeObjectURL(blob);
}


function showFileNameSetter(){
	document.getElementById("filenamediv").style.display="block";
}
//保存所写代码
function saveCode(){
	var filename=document.getElementById("filename").value;
	var content=document.getElementById("outputdisplay").innerText||document.getElementById("outputdisplay").textContent;
	createAndDownloadFile(filename,content);
	document.getElementById("filenamediv").style.display="none";
}


//读取打开文件的内容并显示
function readAsText(){  
    var file = document.getElementById("file").files[0];  
    var reader = new FileReader();  
    //将文件以文本形式读入页面  
    reader.readAsText(file);  
    reader.onload=function(e){  
		var result=reader.result;
		//加入<pre>后即可保留回车换行符
        document.getElementById("inputdisplay").innerHTML="<pre>"+result+"</pre>";
		format();
    }  
}

//格式化代码 高亮显示代码内的关键词
function format(){
	var text=document.getElementById("inputdisplay").innerText||document.getElementById("inputdisplay").textContent;
	var characters=text.split("");
	var keywords=new Array();
	
	for(var i=0;i<characters.length;i++){
		if(i==0){
			keywords.push(characters[0]);
		}else{
			var letterPattern=/[a-z]/i;
			if(letterPattern.test(characters[i-1])&&letterPattern.test(characters[i])){
				var mid=keywords.pop();
				keywords.push(mid+characters[i]);			
			}else{
				keywords.push(characters[i]);
			}
		}
	}
	
	for(var i=0;i<keywords.length;i++){
		//彩色高亮显示关键词
		if(colorMap[keywords[i]]!=undefined){
			keywords[i]=colorize(keywords[i],colorMap[keywords[i]]);
		}
		//处理特殊字符
		if(keywords[i]=="<"){
			keywords[i]="<";
		}
		if(keywords[i]==">"){
			keywords[i]=">";
		}
		if(keywords[i]==" "){
			keywords[i]=" ";
		}		
	}
	//加入<pre>后即可保留回车换行符
	document.getElementById("outputdisplay").innerHTML="<pre>"+keywords.join("")+"</pre>";	
}

//高亮着色
function colorize(word,color){
	return "<span style='color:"+color+"'>"+word+"</span>";
}

//触发文件选择按钮
function clickFileButton(){
	document.getElementById("file").click();
}


</SCRIPT>

</HEAD>

<BODY>

	<div class="maindiv">
		<p id="outputdisplay"></p>		
		<p id="inputdisplay" contenteditable="true" oninput="format()"></p>		
	</div>
	
	<div class="menudiv">
		<label>JSIDE</label>
		<button onclick="showFileNameSetter()">save</button>
		<button onclick="clickFileButton()">open</button>
		<input type="file" id="file" onchange="readAsText()"/>
	</div>
	
	<div id="filenamediv">
		<div class="filenameinput">
			<label>请输入你想要保存的文件名</label>
			<input type="text" id="filename"/>
			<button onclick="saveCode()">保存</button>
		</div>
	</div>

	
</BODY>
</HTML>