在一段文本中鼠标光标位置插入指定内容

日常需求解决思路和记录，哪里可以改进希望大家可以积极告知(●''●)

需求

效果图

要求

• 点击按钮在鼠标光标处添加固定格式变量
• 变量内数字应为按照顺序递增, {1}{2}...

实现

1.正则匹配文本内是否存在变量

function matchVariable(val) {
    let reg = /(?<={).*?(?=})/g
    let variableArr = val.match(reg)
    return variableArr
}

matchVariable('你好,小明') // null
matchVariable('你好,{1}') // [1]

2.实现在文本后面添加相应变量

function addVariable(content) {
    let variableArr = matchVariable(content)
    if(!variableArr) return content += '{1}'
    variableArr = variableArr.map(v => Number(v)).sort((a,b) => a-b) // 顺序排序
    let minIndex = variableArr.findIndex((ele, index) => ele != index + 1) // 找出最小的非连续变量索引
    let val = 0
    if(minIndex < 0) {
        // 说明都是文本内的变量都是按顺序 直接找出最大的数+1即可
        val = variableArr[variableArr.length - 1] + 1
    } else if(minIndex == 0) {
        // 第一个变量不存在
        val = 1
    } else {
        // 找不出不按顺序排列前的一个+1
        val = variableArr[minIndex - 1] + 1
    }
    return content += `{${val}}`
}

addVariable('你好') // '你好{1}'
addVariable('你好{1}') // '你好{1}{2}'
addVariable('你好{1}{3}') // '你好{1}{3}{2}'
addVariable('你好{2}{3}') // '你好{2}{3}{1}'

在鼠标光标处添加变量

• 找到光标在文本中的索引位置 (ele.selectionStart)

<div id="app">
  <textarea id="textarea" rows="5" cols="35"></textarea>
  <button onclick="addVariable()">添加变量</button>
</div>

function getCursorPosition() {
    let ele = document.querySelector('#textarea')
    let cursorIndex = ele.selectionStart;
    return cursorIndex
}

• 在文本的光标处插入变量

function addString(str, index, add) {
    return str.slice(0, index) + add + str.slice(index);
}

addString('你好,世界', 3, '我的')  //'你好,我的世界'

结合一下