如何替换{with {}

Question

我正在尝试在文本框中开发大括号自动完成功能。 我在文本框上尝试了javascript替换功能。 但是我从函数中获得了一个奇怪的输出。 这是我正在处理的代码。

HTML ：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<input type ="text" id="textbox">
</body>
</html>

Javascript ：

var element = document.getElementById('textbox');
element.oninput = function(){
 var code = (function(){
      var val = element.value;
      element.value = val.replace(/\{/ , "{}");  
 })();
};

当我键入一个{撑杆我正在{} ，当我输入超过1时，我正在{}}}{{并且它继续...有时我的浏览器在我尝试清除括号时冻结。

这是js bin链接JSBIN

Answer 1

问题是，即使支架已经匹配，您也总是替换{ with {} 。 你应该确保它没有负向前瞻 ： /\\{(?!\\})/

---

要修复退格问题，您应该使用一个事件，该事件可以告诉您像onkeyup一样按下了哪个键并添加了一个保护子句。 扩展@Andi的想法，我还添加了箭头键的排除，这样当你想浏览文本时，你不会被迫到文本框的末尾：

 var element = document.getElementById('textbox'); element.onkeyup = function(){ if([8, 37, 39].indexOf(event.which) != -1) return false; var code = (function(){ var val = element.value; element.value = val.replace(/\\{(?!\\})/g, "{}"); })(); }; 

Answer 2

你的正则表达式匹配'{'，你应该排除所有'{}'：

片段：[正则表达式： /(?!{})\\{/ ]

 var element = document.getElementById('textbox'); element.oninput = function() { var code = (function() { var val = element.value; element.value = val.replace(/(?!{})\\{/, "{}"); })(); }; 

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JS Bin</title> </head> <body> <input type="text" id="textbox"> </body> </html> 

更新（使用Backspace工作）：

需要使用键盘事件，以便我们可以获得按下键的键码。 使用onkeyup

 var element = document.getElementById('textbox'); element.onkeyup = function(e) { if (e.which != 8) { var val = element.value; element.value = val.replace(/(?!{})\\{/, "{}"); } }; 

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JS Bin</title> </head> <body> <input type="text" id="textbox"> </body> </html> 

Answer 3

对于自动完成工具，正则表达式可能变得很重，特别是对于负向前瞻。

实际上，您不必在每个输入中查找大括号，只需测试使用onkeypress事件键入的字符。

你也应该把插入符号括起来，否则你还有一次击键，因为你必须回去:)

 var element = document.getElementById('textbox'); element.onkeypress = function(evt){ switch(String.fromCharCode(evt.which)){ case "{": var currentCaretPosition= this.selectionStart; var text= this.value; this.value= text.slice(0, currentCaretPosition)+ "{\\n\\t\\n}"+ text.slice(currentCaretPosition,text.length ); this.setSelectionRange( currentCaretPosition+3, currentCaretPosition+3 ); evt.preventDefault(); } }; 

 #textbox{ border:inset 1px #aaa; width:80vw; height:80vw; margin:2vw; padding:0.5vw } 

 <textarea id="textbox"> function test() </textarea> 

Answer 4

每次调用函数时都会评估整个sting。

{ - > {}如果你现在添加另一个}你得{}}{}

use val.replace(/\{$/ , "{}");

$ only仅计算最后一个字符。 在这里，您可以尝试构建正则表达式查询： https ： //regex101.com/r/iU4xT9/1

PS：当你添加字符并忽略删除键时，当你删除最后一个}你只能调用该函数时，它可能会变得奇怪。

var element = document.getElementById('textbox');
element.onkeyup = function(event){
 if(event.which == 8)
   return false
 var code = (function(){
      var val = element.value;
      element.value = val.replace(/\{$/ , "{}");  
 })();
};