仿发微博插入话题功能 的 工具方法：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
}