Question

我在一个角度为5的项目中工作，用户将选择（突出显示）特定容器内的文本，并且我正在尝试获取所选文本的位置以及它自己的字符串并显示一个小的用两个按钮搞笑。

像这样

我怎么能这样做，一个看起来如何做的避风港，但到目前为止，对我来说，任何想法都没什么用。：d

Answer 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>

Answer 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然后获取该元素的位置，在我获得跨度的位置后我删除它

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

2 个答案: