使用JS(JavaScript)实现词法分析

科技2025-10-01 25

JavaScript实现词法分析

所用软件

Visual Studio Code or Hbuilder-X

代码块

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>词法分析（JS实现）</title> <link href="https://fonts.googleapis.com/css?family=Noto+Serif+SC" rel="stylesheet"> </head> <body> <p class="only">JavaScript实现简易词法分析</p> <main> <textarea name="input" rows="20" cols="40"></textarea> <textarea name="output" rows="20" cols="40"></textarea> <button name="compile">Lexical Analysis</button> </main> <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> <style> p.only { text-align: center; font-size: 2.5em; color: #ce1818; } main { /*对子元素开启弹性布局*/ display: flex; /*弹性元素在必要的时候换行*/ flex-wrap: wrap; /*将弹性元素居中*/ justify-content: center; } textarea, button { font-family: 'Noto Serif SC', STFangSong, serif; font-size: 17px; } </style> </html>

使用方法

直接创建一个html文件，复制粘贴代码块，然后打开html文件即可。

效果图

Processed: 0.013, SQL: 8