Change the background color of a series of text highlighted by mouse

Question

I have a series of paragraphs and I want to change the background color of some text selected. For example:

<p>The quick brown</p>
<p>fox jumps over</p>
<p>the lazy dog</p>

The user selected the text range from "brown" to "lazy" and clicked on change color button. What I want to do is to do modifications on the selected text such as change color, size etc.

Why do you need this? It's going to be rather complicated with getting the selection, inserting spans across several paragraphs etc. — adeneo, Jun 20 '13 at 09:47
Take a look to this SO-Question and then change the background with jQuery http://stackoverflow.com/questions/5379120/get-the-highlighted-selected-text — Michael Schmidt, Jun 20 '13 at 09:47
@adeneo yes i know it's complicated, i would like to get an answer that would at least let me retrieve the nodes under my selection — rajeemcariazo, Jun 20 '13 at 09:49
Maybe will you find some ideas here (http://mark.koli.ch/2009/09/use-javascript-and-jquery-to-get-user-selected-text.html) or here (http://stackoverflow.com/questions/5379120/get-the-highlighted-selected-text) — Ricola3D, Jun 20 '13 at 09:52
@dTDesign, Ricola3d, why don't you put those as your answers — rajeemcariazo, Jun 20 '13 at 09:54
@dTDesign you must insert a span between the selected text so that you can change the selected text background color. In this case the OP uses more then just one `
` so it's going to be very complicated to do this. Imagine if the user selects the _The quick brown fox_, how would you put a `span` in there between two `
`-s? [Example](http://jsfiddle.net/fSnTX/1) — Vucko, Jun 20 '13 at 09:55

score 1 · Accepted Answer · answered Jun 20 '13 at 10:16

this is as far as i got (only works for text in the same block element) if anyone can improve on this please do.

replace 'buttonid' with the id for your button

function selectHTML() {

try {
    if (window.ActiveXObject) {
        var c = document.selection.createRange();
        return c.htmlText;
    }

    var nNd = document.createElement("span");
    var w = getSelection().getRangeAt(0);
    w.surroundContents(nNd);
    return nNd.innerHTML;
} catch (e) {
    if (window.ActiveXObject) {
        return document.selection.createRange();
    } else {
        return getSelection();
    }
}

}


$(function() {

$('#button_id').click( function() {
    var mytext = selectHTML();
    $('span').css({"color":"blue"});
});

});

score 0 · Answer 2 · edited May 23 '17 at 12:05

0

See Selecting text in an element (akin to highlighting with your mouse)

I hope by the help of this post you will be able to achive what you really want.

edited May 23 '17 at 12:05

Community

1
1

answered Jun 20 '13 at 09:52

Sanjeev Rai

6,721
4
23
33

This is not the same... – Balint Bako Jun 20 '13 at 10:16
@Balint Bako, Iknow, but the link was to give an idea that how to get the selected text, based on that he can add logic to changes text's background color. – Sanjeev Rai Jun 20 '13 at 10:19

Change the background color of a series of text highlighted by mouse

2 Answers2