Geek Answers Handbook

How can I replace {with {}

I am trying to create a function to automatically end braces in a text box. I tried the javascript replace function in the text box. But I get a weird output from a function. Here is the code I'm working on.

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

When I type one bracket { , I get {} , when I type more than 1, I get {}}}{{ and this continues. Sometimes my browser freezes when I try to clear curly braces.

Here is the js bin JSBIN link

+4
source share
4 answers

The problem is that you always replace { with {} , even if the bracket is already matched. Instead, you should make sure that this is not a negative view : /\{(?!\})/

To fix the backspace problem, you should instead use an event that can tell you which key was pressed, like onkeyup and add a security sentence. Expanding on the idea of ​​@Andi, I also added an exception for the arrow keys so that you are not forced to the end of the text field when you want to move around 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, "{}"); })(); };
+5
source

Your regular expression matches '{', you must exclude all '{}':

Snippet: [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 (using Backspace):

It is necessary to use the keyboard event so that we can get the key code of the pressed key. Use 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>
+1
source

Regexs can become difficult for an autocomplete tool, especially with negative images.

In fact, you do not need to look for curly braces on each input, just check the character typed with the onkeypress event.

And you also have to put the carriage in braces, otherwise you will have another keystroke, because you need to go 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>
+1
source

The whole score is evaluated every time the function is called.

{ → {} if you add another one } , you will get {}}{}

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

$ evaluates only the last character. Here you can try to create regular requests: https://regex101.com/r/iU4xT9/1

PS: Maybe this is strange when you delete the last one } , you can only call a function when you add characters and ignore the delete key.

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

More articles:


All Articles