代码关键词高亮原理实验
程序员文章站
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>
上一篇： 微信小程序 搜索出来的关键字高亮显示
下一篇： 事务的四大特征