如何用{}替换一个{

I am trying to develop a braces auto completion feature in a text box. I tried the javascript replace function on the textbox. But i am getting a weird output from the function. Here's the code i am work on.

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

HTML:

HTML:

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

Javascript:

Javascript:

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

When i type a single { brace i am getting {} , when i type more than 1 i am getting {}}}{{ and it goes on .. sometimes my browser freezes when i try to clear the braces.

当我输入一个{括号时，我得到{}，当我输入超过1时，我得到{}}{，它继续。有时当我试图清除括号时，我的浏览器会冻结。

Here's the js bin link JSBIN

这是js bin链接JSBIN

4 个解决方案

#1

The problem is that you are always replacing { with {}, even if the bracket has already been matched. You should instead ensure it was not with negative lookahead: /\{(?!\})/

问题是您总是用{}替换{，即使已经匹配了括号。相反，您应该确保它不是带有消极的前视:/\{(?!\})/

To fix the backspace issue, you should instead be using an event which can tell you which key was pressed like onkeyup and add a guard clause. Expanding on @Andi's idea, I also added exclusion for the arrow keys so you won't be forced to the end of the textbox when you want to navigate through the text:

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, "{}");  
    })();
};

#2

Your regex matches '{', you should exclude all '{}':

您的regex匹配'{'，您应该排除所有'{}':

Snippet: [regex : /(?!{})\{/ ]

[regex: /(?!{})\{/]

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>

Update (With Backspace working):

更新(退格工作):

Need to use keyboard event so that we can get keycode of the key pressed. Use onkeyup

需要使用键盘事件，以便我们可以得到按键的按键按下。使用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>

#3

Regexs may become heavy for an autocompletion tool, especially with negative lookaheads.

对于自动完成工具，Regexs可能会变得很重，特别是在使用负的lookahead时。

Actually, you do not have to look for braces at each input, just test the character typed with onkeypress event.

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

And you should also put the caret into the braces, otherwise you have still one keystroke because you have to move back :)

你还应该把插入符号放在括号里，否则你还有一个按键，因为你必须向后移动:)

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>

#4

The whole sting is evaluated each time the function is called.

每次调用这个函数时，都会计算整个sting值。

{ -> {} if you now add another } you get {}}{}

{->{}如果您现在添加另一个}，您将获得{}{}}

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

The $ only evaluates the last character. Here you can try to build regex queries: https://regex101.com/r/iU4xT9/1

$只计算最后一个字符。在这里，您可以尝试构建regex查询:https://regex101.com/r/iU4xT9/1

PS: Maybe it gets weirds when you delete the last } you could only call the function, when you add characters and ignore the delete key.

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(/\{$/ , "{}");  
 })();
};

#1