ミニブログを参考にして話題機能を挿入するツールの方法:textareaはカーソル座標を取得し、カーソル位置を取得、設定し、すべて、現在の話題を取得します.

//    textarea      
const textareaCaret = require('textarea-caret');

function getCaretCoordinates($el) {
    let caret = textareaCaret($el, $el.selectionEnd);

    return {
        top: caret.top, 
        left: caret.left, 
        height: caret.height
    }
}

//    textarea      
function getCursorPosition($el) {
    var cursorPos = 0;
    if (document.selection) {
        // IE
        var fus = document.selection.createRange(); //       
        fus.moveStart('character', -$el.value.length);
        cursorPos = fus.text.length;

    } 
    if ($el.selectionStart || $el.selectionStart == 0) {
        var start = $el.selectionStart;　　 //        
        cursorPos = start;
    }
    return cursorPos;
}

// textarea      
function insertCursorText($el, text) {
  var cursorPos = 0;

  if (document.selection) {
      // IE
      $el.focus(); //    textara     
      var fus = document.selection.createRange(); //       

      fus.moveStart('character', -$el.value.length);
      cursorPos = fus.text.length;

      fus.text = text; //         
      $el.focus(); ///    textara     
  } else if ($el.selectionStart || $el.selectionStart == 0) {
      var start = $el.selectionStart;　　 //        
      var end = $el.selectionEnd;　　 //        

      cursorPos = start;

      //     
      $el.value = $el.value.substring(0, start) + text + $el.value.substring(end, $el.value.length);
  } else {
      $el.value += text;
  }

  return {
      value: $el.value,
      cursorPos: cursorPos
  }
}

//    textarea      
function setCursorPosition($el, pos) {
    if($el.setSelectionRange) {
        $el.focus();
        $el.setSelectionRange(pos, pos);
    } else if ($el.createTextRange) {
        var range = $el.createTextRange();
        range.collapse(true);
        range.moveEnd('character', pos);
        range.moveStart('character', pos);
        range.select();
    }
}

//    “  ”    (  ：'#123#'      ) 【    】
function setTopicStyle(value) {
    var exp = /(#|＃)((?!#).)*(#|＃)/g
    value = value.replace(/]*?>(.*?)/gi, '').replace(/(.*?)]*?>/gi, '').replace(exp, (item) => {
        let newVal = '' + item + ''
        return newVal
    })
    return value
}

//       , src ： textarea    
function parse(src) {

    return src.split(/(#[^#]+#)/).reduce((res, v, i, a) => {

        if (v.length > 1 && v.startsWith('#') && v.endsWith('#')) {
            res.list.push({
                tag: v.substring(1, v.length-1),
                index: res.index,
                completed: true
            });
            
        } else {
          if (i === a.length -1) {

              const parts = v.split('#');
              if (parts.length > 1) {
                  res.list.push({
                      tag: parts.pop(),
                      index: parts[0].length + res.index,
                      completed: false
                  });
              }
          }
        }

        res.index += v.length;

        return res;

    }, {list: [], index: 0});

}

//        res: parse(src); caretPos： getCursorPosition($el)
function getCurrent(res, caretPos) {

    let current = null;

    res.list.some((v, i) => {
        if (v.index < caretPos && v.index + v.tag.length + 2 > caretPos) {
            current = v;
            return true;
        }

        return false;
    });

    return current;
}

export default {
    getCaretCoordinates,
    getCursorPosition,
    setCursorPosition,
    insertCursorText,
    setTopicStyle,
    parse, 
    getCurrent
}