Javascript 获取文本选择（突出显示）位置和字符串

我在angular 5项目中工作，用户将选择（突出显示）特定容器内的文本，我尝试获取所选文本的位置和字符串本身，并显示一个带有两个按钮的小bobble

类似这样的东西

---

我该怎么做呢，一个避风港，看看怎么做，但到目前为止，对我来说没有什么工作，没有任何想法D

我知道这并不完美，但这也许能让你走

函数getSelectionText（）{ var text=“”； if（window.getSelection）{ text=window.getSelection（）.toString（）； } 返回文本； } document.onmouseup=document.onkeyup=document.onselectionchange=function（）{ document.getElementById（“sel”）.value=getSelectionText（）； }; $（“h1”）.mouseup（函数（事件）{ $（“#选项”）.show（）； $（“#选项”）.css（{位置：“绝对”，顶部：event.pageY，左侧：event.pageX}）； }); $（“html”）.mousedown（函数（事件）{ $（“#选项”）.hide（）； });

#选项{
背景色：红色；
高度：100px；
宽度：100px；
}
.区域{
宽度：200px；
}

选择：


请选择一些文本

你好，世界
你好，用户

感谢@Patte帮助我在这里找到了答案，我发布了这个案例的解决方案

public markContent(): void {

    const selection = window.getSelection();
    const selectionRange = window.getSelection().getRangeAt(0);

        const textSeleted = selection.toString();
        const range = selectionRange.cloneRange();
        if (this.markerEvent !== 'mark') {
          const marker = document.createElement('mark');
          marker.setAttribute('class', this.colorMarker);
          // marker.textContent = textSeleted;

          range.surroundContents(marker);
          return;
        }

  }

对于该职位，我使用此其他功能：

  public displayBobble(event): void {

    const selectionRange = window.getSelection().getRangeAt(0);

    this.libraryServices.changeMarkerOptions(event.target.localName);
    if (selectionRange.startOffset !== selectionRange.endOffset) {
      if (event.target.localName === 'p' || event.target.localName === 'mark' || event.target.localName === 'strong') {

        const range = window.getSelection().getRangeAt(0);
        const cloneRange = range.cloneRange();

        range.collapse(true);

        const indexSelection = document.createElement('span');
        indexSelection.setAttribute('id', 'selected_text');
        indexSelection.innerText = '\ufeff';

        range.insertNode(indexSelection);

        const el = document.getElementById('selected_text');
        const elPosition = el.getBoundingClientRect();

        const selection = window.getSelection();

        selection.removeAllRanges();
        selection.addRange(cloneRange);

        this.libraryServices.changeBobblePosition(
          {
            top: (elPosition.top - 50),
            left: (elPosition.left),
            display: 'flex'
          }
        );
        el.remove();
      }
    }
  }

我在这里做的是在选择的开始处注入一个

span

标记和

id

，然后获取该元素的位置，在获取span的位置后，我将其移除。

看一看。