在输入框中选中被()括起来的文字并实现修改()中的文字 vue

Posted 2022-11-30 咖啡壶子

在输入框中选中被 小括号 括起来的文字并实现修改 小括号中的文字

• • 需求复现
  • 代码实现

需求复现

点击某一个列表模板，填充到文本框中（已实现），文本框自动选中第一个被（）括起来的文字，修改完第一个被（）括起来的文字，点击空格键跳选中下一个被（）括起来的文字，并实现修改，直至全部修改完。

代码实现

直接上代码：

 <el-input
                ref="ModelInput"
                @focus="handleCursorPosition"
                @keyup.space.native="keyDownFunction"
                v-show="inputChangeFlag == false"
                type="textarea"
                class="inputModel"
                :rows="5"
                placeholder="请输入内容"
                v-model="form.content"
              >
              </el-input>

 // 处理鼠标位置
    handleCursorPosition(e) 
    	// start：获取所有的被（）括起来的字符串，并将他们全部存放在数组中
      let a1 = /\\（(.+?)\\）/g; //正则获取小括号
      let a2 = this.form.content.match(a1).toString(); //因为输出的是数组，所以得转化成字符串
      let arrStr = a2.split(",");
      arrStr.forEach((item) => 
        this.strNum.push(item.length - 1);
      );
      // end：获取所有的被（）括起来的字符串，并将他们全部存放在数组中
      // start:判断第一次（左括号出现的位置，并且将光标开始定位到（的位置，光标结束定位到）右括号的位置。
      let index = this.form.content.indexOf("（", 0);
      if (this.form.content.indexOf("（")) 
        e.srcElement.selectionStart = index + 1;
        e.srcElement.selectionEnd = index + Number(this.strNum[0]);
      
       // end:判断第一次（左括号出现的位置，并且将光标开始定位到（的位置，光标结束定位到）右括号的位置。
    ,
    // 当space键按下触发的事件
    keyDownFunction(e) 
    	// 记录光标结束的位置
        let cursorEnd = e.srcElement.selectionEnd;
        // 从头删除记录字符串的数组
        this.strNum.unshift();
        // 如果数组长度大于0，则判断下一个（左括号的位置
        if (this.strNum.length > 0) 
          let index = this.form.content.indexOf("（", cursorEnd + 1);
          // 重新定位光标位置，实现修改文字功能
          e.srcElement.selectionStart = index + 1;
          e.srcElement.selectionEnd = index + Number(this.strNum[this.num]);
          this.num = this.num + 1;
         else 
          this.num = 1;
        
    ,