如何在页面获取鼠标选中文字?

517 阅读1分钟

背景

在之前的某个AI系统中,需要在语音转写的文字内容里,让用户可以使用鼠标进行文字选中;然后将选中的文字放置到模型训练中进行训练。提高该段文字的识别率。

具体实践如下

//获取文本光标索引位置
  let selection = function (element) {
    let s, e, range, stored_range
    if (element.selectionStart == undefined) {
      let selection = document.selection
      if (element.tagName.toLowerCase() != 'textarea') {
        let val = this.val(),
          range = selection.createRange().duplicate()
        range.moveEnd('character', val.length)
        s = range.text == '' ? val.length : val.lastIndexOf(range.text)
        range = selection.createRange().duplicate()
        range.moveStart('character', -val.length)
        e = range.text.length
      } else {
        range = selection.createRange()
        stored_range = range.duplicate()
        stored_range.moveToElementText(element)
        stored_range.setEndPoint('EndToEnd', range)
        s = stored_range.text.length - range.text.length
        e = s + range.text.length
      }
    } else {
      s = element.selectionStart
      e = element.selectionEnd
    }
    let te = element.value.substring(s, e)
    return { start: s, end: e, text: te }
  }

  //获取web选中文本内容
  document.selection.createRange().textIE9以下使用
  window.getSelection().toString(); 其他浏览器使用

  //取消选中文本内容
  document.selection.empty(); IE9以下使用
  window.getSelection().removeAllRanges(); 其他浏览器使用

获取到选中的文字后通过接口提交到后端,由后端进行模型训练