如何用{}替换{?

How can i replace a { with {}

本文关键字：替换 何用      更新时间：2023-09-26

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

: 

<!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

问题是您总是用{}替换{，即使括号已经匹配。相反，您应该确保它没有带有负面的forward: /'{(?!'})/

要修复退格问题，您应该使用一个事件，它可以告诉您按了哪个键，如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, "{}");  
    })();
};

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

代码片段:[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>

更新(Backspace工作):

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

对于自动补全工具来说，正则表达式可能会变得很重，特别是具有负查找头的情况下。

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

你还应该把插入符号放在大括号里，否则你仍然需要一次击键，因为你必须向后移动:)

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>

每次调用函数时计算整个字符串。

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

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(/'{$/ , "{}");  
 })();
};
相关文章：