getSelection Highlighting

Question

I have the following javascript which highlights text when I select text and click a button.

$('.highlight').on("click", function (e) { 
    selected = getSelection();
    range = selected.getRangeAt(0);
    newNode = document.createElement("span");
    newNode.setAttribute("class", "highlighted");
    range.surroundContents(newNode);
});
function getSelection() {
    var seltxt = '';
    if (window.getSelection) { 
        seltxt = window.getSelection(); 
    } else if (document.getSelection) { 
        seltxt = document.getSelection(); 
    } else if (document.selection) { 
        seltxt = document.selection.createRange().text; 
    }   else return;

    return seltxt;
}

However this creates a lot of messy span classes within my p tag. Is it possible to immediately colour the selected text without having to wrap it in a span?

Another reason for doing this is that I want to check whether selected text already has a yellow background and if so turn it transparent (perhaps toggling between two colors)

If you wanted this to happen as and when you select, you could do it in `CSS` — lshettyl, Apr 02 '15 at 13:44
Thanks @LShetty how would I do this. I want it so that the background colour remains ((not just when selected). For example a highlighting tool in an ebook. — Craig Powell, Apr 02 '15 at 14:01

lshettyl · Answer 1 · 2015-04-02T14:14:12.363

0

How about something like this? Bear in mind that this adds a style snippet to your page, which you may want to remove as per your requirement. It'd, now on, highlight text on selection too, otherwise.

$(".highlight").on("click", function() {
    !$("#selection").length && $("<style id=\"selection\">::-moz-selection { background: #111; color: #fff; } ::selection { background: #111; color: #fff; }</style>").appendTo("head");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>This is some text. Select me to see my color and background color change!</p>

<button class="highlight">Click Me</button>

Be advised that ::selection has been removed from the spec. It may not work reliably for all users.

enter image description here

edited Apr 02 '15 at 14:14

answered Apr 02 '15 at 14:06

lshettyl

8,166
4
25
31

Thanks for this @LShetty but the background colour doesn't remain - as soon as you remove the selection the background colour goes. I would like it so that when you press the button the background colour changes and stays indefinitley ( Highlighting a real page) – Craig Powell Apr 02 '15 at 14:17
1

I don't think it can be done without wrapping the selection in a tag! – lshettyl Apr 02 '15 at 14:22
Ah I see - That's a shame. Only it gets quite messy if for example you highlight the same thing a few times as it proceeds to make a load of span tags which all overlapy – Craig Powell Apr 02 '15 at 14:23
Take a look at [this](http://stackoverflow.com/questions/3223682/change-css-of-selected-text-using-javascript). Not sure if that's what you were after. – lshettyl Apr 02 '15 at 14:25

getSelection Highlighting

1 Answers1