基于javascript的自定义代码编辑器的缩进

Question

我正在为自己创建的语言制作自定义代码编辑器。 到目前为止，我已经使用javascriprt span类实现了语法高亮显示。 现在，我想在IF ELSE嵌套循环前面添加适当的间距或制表符空间。 我对javascript不太满意。

以下是我到目前为止编写的代码。

 <!DOCTYPE html> <html> <body> <style> .code-str { color: #008000; } .code-elem{ color: #ff0000;} .code-comment { color: #0000FF; } </style> <textarea rows="20" cols="100" type="text" id="text2">Code to test ###IFLISTING:7786### replaces ###ENDIFLISTING:7786### Paste this code in the text area below and see the magic </textarea> <textarea rows="20" cols="100" type="text" id="text1"></textarea> <button onclick="myFunction()">MAGIC</button> <script> function myFunction() { var str = document.getElementById("text1").value; str = str.replace(/###IF(.*?)###/g, '<span class="code-elem"></br> </br>###IF$1### </br></span>'); str = str.replace(/###ENDIF(.*?)###/g, '<span class="code-elem"></br> ###ENDIF$1### </br></span>'); str = str.replace(/###IFLISTING(.*?)###/g, '<span class="code-str"> ###IFLISTING$1### </span>'); str = str.replace(/###ENDIFLISTING(.*?)###/g, '<span class="code-str">###ENDIFLISTING$1### </span>'); str = str.replace(/###VAR(.*?)###/g, '<span class="code-comment"> ###VAR$1### </span>'); str = str.replace(/###LISTING(.*?)###/g, '<span class="code-comment"> ###LISTING$1### </span>'); document.getElementById("demo").innerHTML = str; } </script> <p id="demo"></p> </body> </html>

这是代码的输出

现在，我想要的是嵌套的IF ELSE循环应以适当的缩进清晰显示。 我心里有些粗略的看法。 我想我应该使用一个FOR循环，然后使用一个计数器来增加IF和ELSE计数。 但是我不知道该怎么做。 谁能给我一个主意？

对于最小的帮助或建议，我将非常感谢。

Answer 1

您不仅必须迭代所有具有匹配关键字的行，还必须迭代所有行，然后维护当前的缩进 ，对于某些关键字，此缩进会增加，对于其他关键字，则会减少。 我会将这样的缩进影响作为每个关键字的属性存储在它们的样式属性旁边：

 const keywords = { IF: { style: "code-elem", indent: 4 }, ENDIF: { style: "code-elem", indent: -4 }, IFLISTING: { style: "code-str", indent: 4 }, ENDIFLISTING: { style: "code-str", indent: -4 }, VAR: { style: "code-comment", indent: 0 }, LISTING: { style: "code-comment", indent: 0 } }; function myFunction() { let indent = 0; document.getElementById("demo").innerHTML = document.getElementById("text1").value.split(/[\\r\\n]+/).map(line => { const oldIndent = indent; line = line.trim().replace(/###([AZ]+)(.*?)###/g, (m, keyword, arg) => { const param = keywords[keyword]; if (!param) return m; indent += param.indent; return `<span class="${param.style}">${m}</span>`; }); return "&nbsp;".repeat(Math.min(indent, oldIndent)) + line; }).join("<br>"); }

 .code-str { color: #080; } .code-elem { color: #f00;} .code-comment { color: #00f; }

 <textarea rows="15" cols="80" type="text" id="text1">###VAR:837:Single### ###IF:69154!=1### ###IF:69154!=1### ###VAR:69154:Single###x ###ENDIF:69154### ###VAR:69154:Single###x ###ENDIF:69154### ###VAR:990:Single### battery ###VAR:S301:Single###mAh (###VAR:S302:Single###V) ###IFLISTING:7785### replaces ###ENDIFLISTING:7785### ###IFLISTING:7786### replaces ###ENDIFLISTING:7786### </textarea><br> <button onclick="myFunction()">MAGIC</button> <p id="demo"></p>

基于javascript的自定义代码编辑器的缩进

问题描述

1 个解决方案

解决方案1
0 已采纳 2019-02-15 13:04:30

基于javascript的自定义代码编辑器的缩进

问题描述

1 个解决方案

解决方案1 0 已采纳 2019-02-15 13:04:30

解决方案1
0 已采纳 2019-02-15 13:04:30