Get text select(highlight) position and string

Question

I´m working in a project with angular 5, the user is gonna select(highlight) a text inside of a specific container and i´m trying get the position of the text selected and the string it self and display a small bobble with two buttons.

Something like this

how can i do it, a haven looking how o do it but so far nothing a work for me, any ideas. :D

Take a look at [this question](https://stackoverflow.com/questions/5176761/getting-selected-text-position). — ConnorsFan, Feb 06 '18 at 14:25

PEPEGA · Answer 1 · 2018-02-06T13:51:36.297

I know its not perfect but this can maybe get you going

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>

score 2 · Accepted Answer · answered Mar 21 '18 at 11:05

Thanks to @Patte that help to found the answer here i post the solution for this case.

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;
        }

  }

for the position i use this other function:

  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();
      }
    }
  }

what i´m doing here is inject a span tag with and id at the start of the selection and then get the position of that element, after i get the position of the span i remove it.

Get text select(highlight) position and string

2 Answers2