Text Highlighting epub


I have a problem with text-highlighting. To select the Text for highlighting, I use the first function (getSelectionCharOffsetsWithin) to get the position (start and end) and with the second one (setColor) I set the color. When I highlight at the first time, my start and end position are correct and my text/word will be highlighted. When I select another word/text, e.g. directly afterwards the text position starts again by 0

there are my functions:

    public ngAfterViewInit(): void {
        var self = this;
        var iFrame = self.book.renderer.render;
        //var bookID = iFrame.id;
        var rendered = this.book.renderTo('area');
        rendered.then(function() {
            var currentLocation = self.book.getCurrentLocationCfi();
            self.currentPage = self.book.pagination.pageFromCfi(currentLocation);
            self.activeLoader = false;


        this.book.on("renderer:mouseup", () => {
            var win = self.book.renderer.render.window;
            if(win.getSelection().toString() !== '') {
                var sel = self.getSelectionCharOffsetsWithin(win);
                self.saveHighlight(sel.start, sel.end);
                console.log(sel.start + ": " + sel.end);

    private getSelectionCharOffsetsWithin(win) {
        var range;
        var selectionCont;
        var span;

        if (typeof win.getSelection !== "undefined") {
            range = win.getSelection().getRangeAt(0);
            this.setColor(range, range.startOffset, range.endOffset)
        return {
            start: range.startOffset,
            end: range.endOffset

    private setColor(win, start, end){

        var range = win;
        var selectionCont;
        var span;

        selectionCont = range.extractContents();
        span = document.createElement("span");
        span.style.backgroundColor = "#f0f78f";

hope someone can help me …