Textarea中插入变量并将变量限制为一个整体不允许修改

script

const formData = ref{
  content: '各分公司资产管理岗：\n　　根据《通知》每月报送相关信息的要求，现将报送{{数据期间}}营业职场情况通知如下：\n　　一、时间要求：请务必于{{填报截止日期}}前报送并核对完毕。过时将关闭系统，无法修改...'
}

const myContent = document.querySelector('#myContent')

// 选择方法
const selectContent = (event) => {
    if (timer) {
        clearTimeout(timer)
        timer = null
    }
    const selectionStart = event.target.selectionStart
    const selectionEnd = event.target.selectionEnd
    let text = formData.value.content
    const regex = /\{{([^}]+)\}}/g
    const matches = [...text.matchAll(regex)]
    const results = matches.map(i => ({
        content: i[0],
        startIndex: i.index,
        endIndex: i.index + i[0].length
    }))
    for (let i of results) {
        if (selectionStart === selectionEnd) {
            if (selectionStart >= i.startIndex && selectionEnd <= i.endIndex) {
                // 当光标处于变量词组内部，选中整个词组
                timer = setTimeout(() => {
                    myContent.setSelectionRange(i.startIndex, i.endIndex)
                    // 处理键盘向左向右切换
                    if (event.code === 'ArrowLeft' && selectionStart === i.startIndex) {
                        myContent.setSelectionRange(i.startIndex - 1, i.startIndex - 1)
                    } else if (event.code === 'ArrowRight' && selectionEnd === i.endIndex) {
                        myContent.setSelectionRange(i.endIndex + 1, i.endIndex + 1)
                    }
                }, 200)
            }
        } else if ((selectionStart >= i.startIndex && selectionStart <= i.endIndex) || (selectionEnd >= i.startIndex && selectionEnd <= i.endIndex)) {
            // 当光标处于变量词组内部，选中整个词组
            timer = setTimeout(() => {
                myContent.setSelectionRange(i.startIndex, i.endIndex)
            }, 200)
        }
    }
}

// 插入变量
const insertText = async (myValue) => {
    if (myContent.selectionStart || myContent.selectionStart === 0) {
        const startPos = myContent.selectionStart
        const endPos = myContent.selectionEnd
        formData.value.content = myContent.value.substring(0, startPos) + myValue + myContent.value.substring(endPos, myContent.value.length)
        await nextTick() // 这里是重点
        myContent.setSelectionRange(endPos + myValue.length, endPos + myValue.length)
    } else {
        formData.value.content += myValue
    }
}

template

<a-textarea v-model:value="formData.content" id="myContent" autoSize @keyup="selectContent" @click="selectContent" />
<a-button @click="insertText('{{数据期间}}')">插入变量</a-button>