I'm trying to get the position of rich text pasted from the clipboard:

$(window).on('paste', checkClipboard);

function checkClipboard(e){
    var pastedText = e.originalEvent.clipboardData.getData('text/html');
    var parser = new DOMParser();
    var htmlDoc = parser.parseFromString(pastedText, 'text/html');
    console.log(htmlDoc);
}

For the next rich text "var parser = new DOMParser()" the result will be the following

In the html the tree rich text is included in spans.

How we can get the style declaration like this: "style name - style value - position from - position to"? For the example above it would be like:

{font-color: #000080, from: 0, to: 3}

{font-weight: bold, from: 0, to: 3}

{font-color: #458383, from: 4, to: 9}

...

PS: it is useless to count the length of textContent of body.firstChild.children because only spans with rich text are children, but not the plain text between the spans. So for the example above there are only 4 children.