编译原理 #01# 简易词法分析器（js实现）
// 实验存档
输入示例
main()
{
int a, b;
a = ;
b = a + ;
}
效果图
全部代码
编辑一份.html文件，将代码拷入，作为网页打开即可使用。
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title>Lexical_Analysis</title>
<link href="https://fonts.googleapis.com/css?family=Noto+Serif+SC" rel="stylesheet">
<style>
main {
/*对子元素开启弹性布局*/
display: flex;
/*弹性元素在必要的时候换行*/
flex-wrap: wrap;
/*将弹性元素居中*/
justify-content: center;
} textarea,
button {
font-family: 'Noto Serif SC', STFangSong, serif;
font-size: 17px;
}
</style>
</head> <body>
<main>
<textarea name="input" rows="20" cols="40"></textarea>
<textarea name="output" rows="20" cols="40"></textarea>
<button name="compile">Lexical Analysis</button>
</main>s <script>
let inputBox = document.querySelector("textarea[name=input]");
let outputBox = document.querySelector("textarea[name=output]");
let btnCompile = document.querySelector("button[name=compile]");
btnCompile.addEventListener("click", event => {
let inputCode = inputBox.value;
outputBox.value = JSON.stringify(Lexical_Analysis(inputCode));
});
/*
* 规则:
识别保留字：if、int、for、while、do、return、break、continue；
单词种别码为1。
其他的都识别为标识符；单词种别码为2。
常数为无符号整形数；单词种别码为3。
运算符包括：+、-、*、/、=、>、<、>=、<=、!= ；单词种别码为4。
分隔符包括：,、;、{、}、(、)； 单词种别码为5。
*/
const reservedWords = ['if', 'int', 'for', 'while', 'do', 'return', 'break', 'continue'];
const operators = ['+', '-', '*', '/', '=', '<', '>', '!', '>=', '<=', '!='];
const separators = [',', ';', '{', '}', '(', ')']; function Lexical_Analysis(str) {
/**
* current用于标识当前字符位置,
* str[cur]即为当前字符
*/
let cur = 0;
/**
* tokens存储词法分析的最终结果
*/
let tokens = []; while(cur < str.length) { if(/\s/.test(str[cur])) { // 跳过空格
cur++;
} else if(/[a-z]/i.test(str[cur])) { // 读单词
debugger;
let word = "" + str[cur++];
// 测试下一位字符,如果不是字母直接进入下一次循环(此时cur已经右移)
// 如果是则继续读字母,并将cur向右移动
while(cur < str.length && /[a-z]/i.test(str[cur])) {
// cur < str.length防止越界
word += str[cur++];
}
if(reservedWords.includes(word)) {
tokens.push({
type: 1,
value: word,
}); // 存储保留字(关键字)
} else {
tokens.push({
type: 2,
value: word,
}); // 存储普通单词
}
} else if(separators.includes(str[cur])) {
tokens.push({
type: 5,
value: str[cur++],
}); // 存储分隔符并将cur向右移动
} else if(operators.includes(str[cur])) {
let operator = "" + str[cur++];
if(['>', '<', '!'].includes(operator)) {
// 如果下一个字符是=就添加到operator并再次向右移动cur
if(str[cur] = '=') {
operator += str[cur++];
}
}
tokens.push({
type: 4,
value: operator,
}); // 存储运算符
} else if(/[0-9]/.test(str[cur])) {
let val = "" + str[cur++];
// cur < str.length防止越界
while(cur < str.length && /[0-9]/.test(str[cur])) {
val += str[cur++];
}
tokens.push({
type: 3,
value: val,
}); // 存储整数数字
} else {
return "包含非法字符：" + str[cur];
} }
return tokens;
}
</script>
</body>
</html>
附件，龙书2.6节练习：
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
<link href="https://fonts.googleapis.com/css?family=Noto+Serif+SC" rel="stylesheet">
<style>
main {
/*对子元素开启弹性布局*/
display: flex;
/*弹性元素在必要的时候换行*/
flex-wrap: wrap;
/*将弹性元素居中*/
justify-content: center;
} textarea,
button {
font-family: 'Noto Serif SC', STFangSong, serif;
font-size: 17px;
}
</style>
</head> <body>
<main>
<textarea name="input" rows="20" cols="40"></textarea>
<textarea name="output" rows="20" cols="40"></textarea>
<button name="execute">Execute</button>
</main> <script>
let inputBox = document.querySelector("textarea[name=input]");
let outputBox = document.querySelector("textarea[name=output]");
let btnExecute = document.querySelector("button[name=execute]"); btnExecute.addEventListener("click", event => {
let tokens = tokenizer(inputBox.value);
console.log(tokens);
}); function tokenizer(input) {
let s = input;
let cur = 0;
let peek = ' ';
let line = 1;
let words = new Map(); let readChar = () => s[cur++];
let undo = () => cur--;
let scan = () => { // 每次scan返回一个Token
// 略过空格,上次设置的peek值并不会被清空
for (;; peek = readChar()) {
if (peek == undefined) {
return null; // 读完了
} else if (peek == ' ' || peek == '\t') {
continue; // 略过空格和Tab
} else if (peek == '\n') {
line++; // 记录当前行
} else {
break;
}
} // 略过注释
if ('/' == peek) {
peek = readChar();
if ('/' == peek) {
// 注释类型1
peek = readChar();
for (;; peek = readChar()) {
if (peek == '\n') {
break; // 正常退出
} else if (peek == undefined) {
return null; // 读完了,正常退出
}
}
} else if ('*' == peek) {
peek = readChar();
// 注释类型2
let lastAsterisk = false;
for (;; peek = readChar()) {
if (peek == undefined) {
console.log("注释语法错误01");
return null; // 语法错误
} else if (peek == '\n') {
lastAsterisk = false;
line++; // 记录当前行
} else if (peek == '*') {
lastAsterisk = true;
} else if (lastAsterisk && peek == '/') {
peek = readChar();
break; // 正常退出
} else {
lastAsterisk = false;
}
}
} else {
// 语法错误
console.log("注释语法错误02");
return null;
}
} // 略过空格,上次设置的peek值并不会被清空
for (;; peek = readChar()) {
if (peek == undefined) {
return null; // 读完了
} else if (peek == ' ' || peek == '\t') {
continue; // 略过空格和Tab
} else if (peek == '\n') {
line++; // 记录当前行
} else {
break;
}
} if (/[0-9.]/.test(peek)) {
let temp = peek;
let hasPoint = false;
if (peek == '.') hasPoint = true;
while (/[0-9.]/.test(peek = readChar())) {
if (peek == '.' && hasPoint) {
console.log("语法错误3，包含多个小数点");
return null;
} else if (peek == '.') {
hasPoint = true;
temp += peek;
} else {
temp += peek;
}
}
return {
tag: 'NUM',
value: Number(temp),
};
} if (/[a-zA-z]/.test(peek)) {
let temp = peek;
while ((peek = readChar()) && /[a-zA-z]/.test(peek)) {
// 经测试,null和undefined都能通过/\w/以及/[a-zA-z]/,并可以转化为字面字符串
temp += peek;
}
let w = words.get(temp);
if (w != undefined) {
return w;
} else {
w = {
tag: 'ID',
lexeme: temp,
};
words.set(temp, w);
return w;
}
} if (/[><=!]/.test(peek)) {
let first = peek;
peek = readChar();
if (peek == '=') {
peek = readChar(); // 避免重复处理
return {
tag: '逻辑运算符',
value: first + '=',
};
} else if (first != '=') {
return {
tag: '逻辑运算符',
value: first,
};
} else { // 单个=的情况,回溯
undo();
peek = first;
}
} let res = {
tag: peek,
};
peek = ' ';
return res;
}; let tokens = [];
let token;
while (token = scan()) {
tokens.push(token);
}
return tokens;
}
</script>
</body> </html>
编译原理 #01# 简易词法分析器（js实现）的更多相关文章
- 编译原理 #02# 简易递归下降分析程序（js实现）
// 实验存档 截图: 代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"&g ...
- 编译原理-一种词法分析器LEX原理
1.将所有单词的正规集用正规式描述 2.用正规式到NFA的转换算 得到识别所有单词用NFA 3.用NFA到DFA的转换算法 得到识别所有单词用DFA 4.将DFA的状态转换函数表示成二维数组 并与DF ...
- 编译原理（简单自动词法分析器LEX）
编译原理(简单自动词法分析器LEX)源程序下载地址: http://files.cnblogs.com/files/hujunzheng/%E6%B1%87%E7%BC%96%E5%8E%9F%E7 ...
- <编译原理 - 函数绘图语言解释器（1）词法分析器 - python>
<编译原理 - 函数绘图语言解释器(1)词法分析器 - python> 背景 编译原理上机实现一个对函数绘图语言的解释器 - 用除C外的不同种语言实现 解释器分为三个实现块: 词法分析器: ...
- 前端与编译原理 用js去运行js代码 js2run
# 前端与编译原理 用js去运行js代码 js2run 前端与编译原理似乎相隔甚远,各种热门的框架都学不过来,那能顾及到这么多底层呢,前端开发者们似乎对编译原理的影响仅仅是"抽象语法树&qu ...
- 编译原理实战——使用Lex/Flex进行编写一个有一定词汇量的词法分析器
编译原理实战--使用Lex/Flex进行编写一个有一定词汇量的词法分析器 by steve yu 2019.9.30 参考文档:1.https://blog.csdn.net/mist14/artic ...
- 《编译原理》构造与正规式 (0|1)*01 等价的 DFA - 例题解析
<编译原理>构造与正规式 (0|1)*01 等价的 DFA - 例题解析 解题步骤: NFA 状态转换图 子集法 DFA 的状态转换矩阵 DFA 的状态转图 解: 已给正规式:(0|1)* ...
- 前端与编译原理——用JS写一个JS解释器
说起编译原理,印象往往只停留在本科时那些枯燥的课程和晦涩的概念.作为前端开发者,编译原理似乎离我们很远,对它的理解很可能仅仅局限于"抽象语法树(AST)".但这仅仅是个开头而已.编 ...
- Compiler Theory(编译原理)、词法/语法/AST/中间代码优化在Webshell检测上的应用
catalog . 引论 . 构建一个编译器的相关科学 . 程序设计语言基础 . 一个简单的语法制导翻译器 . 简单表达式的翻译器(源代码示例) . 词法分析 . 生成中间代码 . 词法分析器的实现 ...
随机推荐
- Python学习之旅（三十七）
Python基础知识(36):访问数据库(Ⅰ) 程序运行的时候,数据都是在内存中的.当程序终止的时候,通常都需要将数据保存到磁盘上,无论是保存到本地磁盘,还是通过网络保存到服务器上,最终都会将数据写入 ...
- VS2015调试ArcMap Add-in插件提示尝试运行项目时出错，无法启动程序“路径\arcmap.exe”
如图所示的错误: 打开VS2015→工具→选项→常规→如图标记的两项打钩: 参考: https://gis.stackovernet.com/cn/q/40845 http://www.voidcn. ...
- shell 脚本示例
#!/bin/sh #while true #do cd /mnt/vfw/third_meteor for sub in `ls` do cd /mnt/vfw/third_meteor/${sub ...
- Mac 下安装Fiddler抓包工具
需求 我们都知道在Mac电脑下面有一个非常好的抓包工具:Charles.但是这个只能抓代理的数据包.但是有时候想要调试本地网卡的数据库 Charles 就没办法了.就想到了在windows下面的一个F ...
- MS17-010 漏洞研究——免考课题 20155104 赵文昊
免考实验与研究--MS17-010漏洞研究 研究内容 ·MS17-010漏洞的来源 ·MS17-010漏洞的攻击实例 ·MS17-010漏洞原理分析 ·MS17-010代码分析 写在前面:这次对一个漏 ...
- 微信小程序登录流程及解析用户openid session_key，获取用户信息
为优化用户体验,使用 wx.getUserInfo 接口直接弹出授权框的开发方式将逐步不再支持.从2018年4月30日开始,小程序与小游戏的体验版.开发版调用 wx.getUserInfo 接口,将无 ...
- hdfs核心主件服务的启停方式
停止mapreduce服务 /hadoop/hadoop-2.6.4/sbin/stop-yarn.sh 启动mapreduce服务 /hadoop/hadoop-2.6.4/sbin/start-y ...
- python 模拟实现一个ATM + 购物商城程序
思路:ATM是一个单独程序,提供给消费的是一个接口core下的settlement.py,只做了个人的,没写管理的模块 Shopping也是一个单独的,只做了一个购物的消费模块,没写商家模块,偷懒用了 ...
- 深入理解Java虚拟机8-chap12-13-斗者5星
一.操作系统与内存 通过在处理器与内存之间添加一层访问及更新速度更快的高速缓存,可以一定程度解决处理器与内存速度的矛盾 引入新问题:缓存一致性,即每个处理器只与自己的缓存交互,如果操作的是内存中的同一 ...
- layer倒计时弹框/弹层 DEMO
layer.msg("提示语...", { time: 5000, shade: 0.6, success: function (layero, index) { var msg ...