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

问题是，即使支架已经匹配，您始终会将{替换为{}。您应该确保它不在negative lookahead中：/\{(?!\})/

<小时/> 要修复退格问题，您应该使用一个事件来告诉您按下了哪个键，如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

您的正则表达式匹配＆＃39; {＆＃39;，您应该排除所有＆＃39; {}＆＃39;：

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

＆＃13;

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

＆＃13;

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

＆＃13;

更新（使用Backspace工作）：

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

自动填充工具的正则表达式可能会变得很重，尤其是负面前瞻。

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

你还应该把插入符号括起来，否则你还有一次击键，因为你必须向后移动:)

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 4

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

{ - ＆gt; {} 如果您现在添加另一个}，则会获得{}}{}

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

$仅评估最后一个字符。在这里，您可以尝试构建正则表达式查询： 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(/\{$/ , "{}");  
 })();
};

我如何用{}

4 个答案: