js语法检查器

将以下代码拷贝到新的HTML文件中打开即可看到效果！

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>JS语法检查器</title>
<style>
.js-color-reservedword {
color: #0823fc;
}
.js-color-identifier {
color: #ff8013;
}
.js-color-exception {
text-decoration: underline;
color: red;
}
.js-color-numericliteral {
color: #6df407;
}
.js-color-stringliteral {
color: #fc9090;
}
.js-color-comment {
color: green;
}
.js-color-functionname {
color: #f8f408;
}
.js-color-punctuator {
color: #e804fa;
}
.js-color-regularexpressionliteral {
color: #73b2ee;
}
.js-color-linecount {
color: pink;
}
.js-code-line-border {
border: 1px solid #cbeeb0;
}
.code-text, .code-div {
width: 600px;
height: 600px;
}
div, span {
margin: 0px;
padding: 0px;
}
pre{
margin: 0;
padding: 0;
display: block;
}
.js-code-edit, textarea {
font-size: 15px;
color: black;
background-color: white;
width: 49%;
height: 600px;
float: left;
border: none;
outline: 1px solid black;
overflow: auto;
margin-left: 0.8%;
}
button {
width: 240px;
height: 50px;
margin-top: 20px;
}
</style>
</head>
<body>
<textarea spellcheck="false">
function paintAST(ast){
var result = "<pre>" + _paintAST(ast) + "</pre>";
return result.replace(/<pre><\/pre>/, ‘<pre><br></pre>‘);
function _paintAST(ast){
var str = ‘‘;
for(var name in ast){
if(_typeof(ast[name], ‘Object‘) && ast[name].value){
if(ast[name].type == ‘LineTerminator‘){ str += ast[name].value.replace(/\s/g, ‘</pre><pre>‘); }
else{
var className = ‘js-color-‘ + ast[name].type.toLowerCase(),
value = ast[name].value.replace(/</g, ‘<‘).replace(/>/g, ‘>‘);
str += ‘<span class="‘ + className +‘" ‘ + (ast[name].msg? ‘title="‘ + ast[name].msg + ‘"‘: ‘‘) +‘>‘ + value + ‘</span>‘;
}
}
else if(_typeof(ast[name], ‘Array‘) || _typeof(ast[name], ‘Object‘)){ str += _paintAST(ast[name]); }
}
return str;
}
function _typeof(obj, type){
return Object.prototype.toString.call(obj).indexOf(type) > -1;
}
}
</textarea>
<div class="js-code-edit" spellcheck="false"></div>
<button>Test</button>
<script>
var btn = document.querySelector(‘button‘);
document.querySelector(‘.js-code-edit‘).innerHTML = JsCodeEdit(document.querySelector(‘textarea‘).value);
btn.onclick = function (e) {
//var sTime = Date.now();
document.querySelector(‘.js-code-edit‘).innerHTML = JsCodeEdit(document.querySelector(‘textarea‘).value);
//alert((Date.now() - sTime));
}
function JsCodeEdit(string) {
var ast = parserJSCode(string);
return paintAST(ast);//将表达式树转换成HTML
return printAST(ast);//返回表达式树
}
function printAST(ast) {
return JSON.stringify(ast);
}
function paintAST(ast){
var result = "<pre>" + _paintAST(ast) + "</pre>";
return result.replace(/<pre><\/pre>/, ‘<pre><br></pre>‘);
function _paintAST(ast){
var str = ‘‘;
for(var name in ast){
if(_typeof(ast[name], ‘Object‘) && ast[name].value){
if(ast[name].type == ‘LineTerminator‘){ str += ast[name].value.replace(/\s/g, ‘</pre><pre>‘); }
else{
var className = ‘js-color-‘ + ast[name].type.toLowerCase(),
value = ast[name].value.replace(/</g, ‘<‘).replace(/>/g, ‘>‘);
str += ‘<span class="‘ + className +‘" ‘ + (ast[name].msg? ‘title="‘ + ast[name].msg + ‘"‘: ‘‘) +‘>‘ + value + ‘</span>‘;
}
}
else if(_typeof(ast[name], ‘Array‘) || _typeof(ast[name], ‘Object‘)){ str += _paintAST(ast[name]); }
}
return str;
}
function _typeof(obj, type){
return Object.prototype.toString.call(obj).indexOf(type) > -1;
}
}
function parserJSCode(string) {
if (!string || typeof string != ‘string‘) { return { AST: { type: ‘Program‘, body: [] } }; }
var globalVariable = { strictModel: false, currInstance: ‘‘ };
var AST = { type: ‘Program‘, body: [] }, i = 0;
var PARSER_FINSH = ‘Parser js code is finshed!‘;
var startFun = new Function();
try{ startFun.program(AST.body);
}
catch(e){
if(e != PARSER_FINSH){ console.error(e); }
}
return AST;
function peek(parent, getReg) {
if(eol()){ throw PARSER_FINSH; }
var haveLineTerminator = false;
do{
var space = getSpace(),
terminator = getLineTerminator(),
comm = comment();
pushItem(parent, space), pushItem(parent, terminator), pushItem(parent, comm);
if(!space && ! terminator && !comm){ break; }
}while(!eol());
if(eol()){ throw PARSER_FINSH; }
var returnObj = identifierName() || stringLiteral() || numericLiteral() || punctuator() ||
(getReg && regularExpressionLiteral()) || divPunctuator() || unknowToken();
returnObj.haveLineTerminator = haveLineTerminator;
return returnObj;

时间： 2024-11-05 13:32:03

js语法检查器

js语法检查器的相关文章

一个简单的C语言语法检查器的实现

如何快速检查js语法学习Javascript

指定js文件不使用 ESLint 语法检查

Grunt 之使用 JavaScript 语法检查工具 jshint

javascript(js)基础 dom基础（js语法）未来会删除此博客

语法解析器！

node.js教程基础：node.js包管理器

配置grunt进行css、js的检查、合并和压缩

分享15个美化源码的代码语法着色器