更改文字选择的颜色

Question

I understand that there is a CSS pseudo-element ::seleсtion . But nevertheless, I need it, because I learn JavaScript. Here's the code to which I came, but it does not work:

document.body.addEventListener('mouseup', function() {
    var txt = window.getSelection().toString();
    var txtNode = document.createTextNode(txt);
    var rng = document.createRange();
    rng.setStart(txtNode, 0);
    rng.setEnd(txtNode, txt.length);
    var span = document.createElement('span');
    span.style.backgroundColor = 'green';
    rng.surroundContents(span);
}, false);

Answer 1

Until that happened only highlight. What more do to when clicking on an empty space allocation reset?

document.body.addEventListener('mouseup' , function(){
    var selection = window.getSelection();
    var range = selection.getRangeAt(0);

    var span = document.createElement('span');
    span.style.backgroundColor = 'green';

    range.surroundContents(span);
} , false);