利用js的selection操作，地址：https://developer.mozila.org/en-US/docs/Web/API/Selection


HTML代码：

<textarea class='showOptions_content'></textarea>

js代码：

var mousePlace = getCursortPosition(document.getElementsByClassName("showOptions_content")[0]);//获取光标的位置insertSpan(".showOptions_content",mousePlace,"测试数据");//重新给类名为showOptions_content的元素重新赋值

/**
 * 插入指定元素到指定位置
 * 参数：
 *      target：需要插入元素的目标id（在字符串前加#，例："#showOptions"）或者class类名（在字符串前加.例：".showOptions"）
 *      placeNum：插入到元素的位置，
 *      contenTxt：需要插入的内容
 *      className：需要往目标元素中插入的元素的类名，数组（多个类名用）或者字符串（单个类名），可以不传
 * **/
function insertSpan(target,placeNum,contenTxt) {
    if($(target) && ($(target).length > 0)){
        var tempValue = $(target).val().substr(placeNum);//临时存储条件框鼠标位置后面的值
        /**
         * 实现逻辑：将原来元素的值根据光标的位置后面的值截取出来，临时保存，
         * 然后在将光标位置之间的值截取出来加上需要增加的值，然后将刚刚临时保存的
         * 光标后面的元素加上，最后将这个加起来的值重新复制给内容框
         * **/
        var newValue = $(target).val().substr(0,placeNum).trim() + " " + contenTxt.trim() + " " + tempValue.trim();
        $(target).val(newValue.trim());
        setCaretPosition($(target)[0],placeNum + contenTxt.length + 1);
    }else{
        console.error("需要插入指值的目标元素不存在");
    }
}
/**
 * 获取光标位置
 * 参数：
 *      ctrl：需要获取位置的元素（document.getElementById("p1")，document.getElementsByClassName("current")[0]）
 *  返回值：
 *      CaretPos：返回光标当前的位置
 * **/
function getCursortPosition (ctrl) {
    //获取光标位置函数
    var CaretPos = 0;
    // IE Support
    if (document.selection)
    {
        ctrl.focus (); // 获取焦点
        var Sel = document.selection.createRange (); // 创建选定区域
        Sel.moveStart('character', -ctrl.value.length); // 移动开始点到最左边位置
        CaretPos = Sel.text.length;                      // 获取当前选定区的文本内容长度
    }
    // Firefox,Chrome,edg support
    else if (ctrl.selectionStart || (ctrl.selectionStart === '0'))
    {
        CaretPos =ctrl.selectionStart; // 获取选定区的开始点
    }
    return CaretPos;
}
// 设置光标位置
function setCaretPosition(ctrl, pos)
{
    //设置光标位置函数 
    if(ctrl.setSelectionRange) 
    {
        ctrl.focus();  // 获取焦点
        ctrl.setSelectionRange(pos,pos);  // 设置选定区的开始和结束点
    } 
    else if (ctrl.createTextRange)
    { 
        var range = ctrl.createTextRange();  // 创建选定区
        range.collapse(true);                // 设置为折叠,即光标起点和结束点重叠在一起
        range.moveEnd('character', pos);     // 移动结束点
        range.moveStart('character', pos);   // 移动开始点
        range.select();                      // 选定当前区域
    } 
}

 

上面给指定元素的位置插值，这个方法是根据别人的实例修改的，实例如下，因为这个示例是在目标元素内不断增加子元素，但是我的需求是往往某个元素中增加文字，比如往textarea标签中不断增加指定字符串，所以我根据下面的示例修改了一下。

// 插入指定元素到指定位置
 <!doctype html>
 <html>
 <head>
 <title>selection</title>
 </head>
 <body>
     <p id="p1" contenteditable="true"><b>Hello</b> World</p>  
     <input type="button" value="insertSpan" οnclick="insertSpan()" />
 </body>
 <script>  
 function insertSpan() {
     var oP1 = document.getElementById("p1");  
     var oHello = oP1.firstChild.firstChild;  
     var oWorld = oP1.lastChild;  
     var oRange = document.createRange();  
     var oSpan = document.createElement("span");  
     oSpan.style.color = "red";  
     oSpan.appendChild(document.createTextNode("Inserted text"));  
        
     oRange.setStart(oHello, 2);  
     oRange.setEnd(oWorld, 3);  
     oRange.insertNode(oSpan);  
 }
 </script>
 </html>