JS gets the text selected by the mouse and is in the selected state

This effect needs to be achieved in the project

In short ： After the mouse selects part of the text , Stay in this state , And add front and rear marks
There is no implementation method of this scenario found on the Internet , I can only write by myself ;

<div class="d-inline" ng-mousedown="cutMouseDown()" ng-mouseup="cutMouseUp($event)" ng-bind-html="cutedSample"></div>

class CutDemo {
    
  constructor() {
    
    this.cutedSample = ''; //  Fields waiting to be cropped 
    this.selection = null; //  Crop the selected section
    this.isParsed = false; //  Whether the preview has been parsed 
    this.maxLenSample = 'bbb'; //  The original field that has not been cropped 
  }
  cutMouseDown() {
    
    if (this.isParsed) return;
    this.cutedSample = this.maxLenSample; //  Restore to pure string ,  Waiting to be cut again 
  }

  cutMouseUp(event) {
    
    if (this.isParsed) return;
    this.selection = this.getSelectText(event.target);
  }

  getSelectText() {
    
    const selection = window.getSelection();
    if (selection.type === 'Range') {
    
      //Caret and null Not selected 
      const start = Math.min(selection.anchorOffset, selection.focusOffset);
      const end = Math.max(selection.anchorOffset, selection.focusOffset);
      if (start === end) return null;
      const first = this.maxLenSample;
      const startHtml = first.substring(0, start);
      const middleHtml = first.substring(start, end);
      const endHtml = first.substring(end);
      const prefix = '<div class="selection-tag"><div class="st-dot"></div><div class="st-line"></div></div>'; //  Tag prefix 
      const suffix = '<div class="selection-tag"><div class="st-line"></div><div class="st-dot"></div></div>'; //  Mark suffix 
      this.cutedSample = startHtml + '<span class="selection-text">' + prefix + middleHtml + suffix + '</span>' + endHtml;
      return {
    
        text: selection.toString(),
        end,
        start,
        focusNode: selection.focusNode,
        anchorNode: selection.anchorNode,
        rangeCount: selection.rangeCount,
      };
    } else {
    
      return null;
    }
  }
}

style ：

.selection-text {
    
  background-color: fade(#4ad3a3, 20);
  position: relative;

  .selection-tag {
    
    position: absolute;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    width: 0;

    .st-dot {
    
      width: 5px;
      height: 5px;
      border-radius: 5px;
      background-color: #4ad3a3;
    }

    .st-line {
    
      width: 1px;
      height: 10px;
      background-color: #4ad3a3;
    }
  }
}

If necessary, the above code , It can be replaced according to the framework in your own project ~