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

【问题标题】：Get text select(highlight) position and string获取文本选择（突出显示）位置和字符串
【发布时间】：2018-02-06 13:17:13
【问题描述】：

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

类似的东西

我该怎么做，一个寻找如何做的避风港，但到目前为止对我来说没有任何工作，任何想法。 :D

【问题讨论】：

看看this question。

标签： javascript angular

【解决方案1】：

我知道它并不完美，但这可能会让你继续前进

function getSelectionText() {
    var text = "";    
    if (window.getSelection) {
        text = window.getSelection().toString();
        
    }
    return text;
}

document.onmouseup = document.onkeyup = document.onselectionchange = function() {
  document.getElementById("sel").value = getSelectionText();
};


$("h1").mouseup( function(event) {
    $("#option").show();
  $("#option").css( {position:"absolute", top:event.pageY, left: event.pageX});
});

$( "html").mousedown( function(event) {
  $("#option").hide();
});

    #option{
        background-color: red;
        height: 100px;
        width: 100px;
     }
     .area{
         width: 200px;
     }

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>

Selection:
<br>
<textarea id="sel" rows="3" cols="50"></textarea>
<p>Please select some text.</p>
<div class="area">
<h1 id="text">Hello world</h1>
</div>
<div hidden id="option">Hello user</div>

【讨论】：

【解决方案2】：

感谢@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，然后获取该元素的位置，在我获得跨度的位置后将其删除。

【讨论】：