建议添加“选择括号”按钮

hbghlyj

建议添加“选择括号”按钮,选择光标位置的外一层括号

1. <button onclick="mytextarea.setRangeBrace()">{}</button>
3. mytextarea = document.querySelector('textarea');
4. Object.defineProperty(mytextarea,'{',{get(){let brace=-1,i=this.selectionStart;do{switch(this.value[--i]){case '{':brace++;break;case '}':brace--;}}while(brace!=0&&i>0)return i}});
5. Object.defineProperty(mytextarea,'}',{get(){let brace=1,i=this.selectionEnd;do{switch(this.value[i++]){case '{':brace++;break;case '}':brace--;}}while(brace!=0&&i<this.value.length)return i}});
6. mytextarea.setRangeBrace=function(){mytextarea.setSelectionRange(this['{'],this['}']);this.focus()}

复制代码

kuing

hbghlyj 发表于 2022-9-2 00:32
建议添加“选择括号”按钮,选择光标位置的外一层括号

好腻害，容我尝试理解一下代码的原理……

为便于阅读，我格式化一下：

1. <button onclick="mytextarea.setRangeBrace()">{}</button>
3. mytextarea = document.querySelector('textarea');
4. Object.defineProperty(mytextarea, '{', {
5.     get() {
6.         let brace = -1,
7.         i = this.selectionStart;
8.         do {
9.             switch (this.value[--i]) {
10.             case '{':
11.                 brace++;
12.                 break;
13.             case '}':
14.                 brace--;
15.             }
16.         } while ( brace != 0 && i > 0 ) return i
17.     }
18. });
19. Object.defineProperty(mytextarea, '}', {
20.     get() {
21.         let brace = 1,
22.         i = this.selectionEnd;
23.         do {
24.             switch (this.value[i++]) {
25.             case '{':
26.                 brace++;
27.                 break;
28.             case '}':
29.                 brace--;
30.             }
31.         } while ( brace != 0 && i < this . value . length ) return i
32.     }
33. });
34. mytextarea.setRangeBrace = function() {
35.     mytextarea.setSelectionRange(this['{'], this['}']);
36.     this.focus()
37. }

复制代码