JavaScript-代码编辑器在必要时跳过输入的更好方法是什么？

Question

我正在对网络应用程序进行编程，例如在线代码编辑器。 基本功能之一是，当用户输入左括号符号“（”时 ，编辑器会自动为您添加右括号“）” 。

因此，一个直接的想法是我为此创建一个对象，定义如下：

var pairCharData = {
    "{": "}",
    "(": ")",
    "\"":"\"",
    "'":"'"
};

这还没有结束。 我希望编辑器更加智能，因此在必要时应跳过输入。 例如，当我在添加一个左括号后立即在编辑器中输入一个右括号符号（当时，右括号已经存在！），则期望编辑器仅移动光标但不显示另一个重复的符号。

因此，我想检查下一个用户输入字符是否为预期的字符。
我创建了另一个地图，如下所示：

var pairCharDataReverse = {
    "}": "{",
    ")": "(",
    "\"":"\"",
    "'":"'"
};

您知道的只是第一张地图的反向版本。 我的想法是跟踪用户的输入键。 这是我的实现

if(key in pairCharDataReverse) {
var leftPair = pairCharDataReverse[key];
if(this.lastKey === leftPair) {
    this.selectionStart = this.selectionEnd = start +1;
    e.preventDefault();
}

当我添加更多对字符时，我必须修改两个贴图，这不是我想要的。
我猜应该有另一种更好的方式来存储数据，而不会带来更多麻烦。 也许有其他数据结构，或者我真的很奇怪。

Answer 1

您可以将<select>元素与<option>元素一起使用，这些元素与用户选择用于在其中换行的字符相对应。 用户选择文本，用户选择<option> ， javascript执行将所选文本包装在所选<option> .value 。

 var textarea = document.querySelector("textarea"); var select = document.querySelector("select"); var text; select.onchange = function(e) { if (text) { var option = this.value.split(""); textarea.value = textarea.value.slice(0, text[0]) + option[0] + textarea.value.slice(text[0], text[1]) + option[1] + textarea.value.slice(text[1]); } this.value = text = null; } textarea.onselect = function(e) { text = [this.selectionStart, this.selectionEnd] } 

 <select> <option></option> <option value="()">()</option> <option value="[]">[]</option> </select><br> <textarea></textarea>