Get HTML of selection in a specific div

Question

I have found a code snippet (can't remember where), and it's working fine - almost :-)

The problem is, that it copies the selection no matter where the selection is made on the entire website, and it must only copy the selection if it is in a specific div - but how is that done?

function getHTMLOfSelection () {
    var range;
    if (document.selection && document.selection.createRange) {
        range = document.selection.createRange();
        return range.htmlText;
    }
    else if (window.getSelection) {
        var selection = window.getSelection();
        if (selection.rangeCount > 0) {
            range = selection.getRangeAt(0);
            var clonedSelection = range.cloneContents();
            var div = document.createElement('div');
            div.appendChild(clonedSelection);
            return div.innerHTML;
        } else {
            return '';
        }
    } else {
        return '';
    }
}

$(document).ready(function() {
    $("#test").click(function() {
        var kopitekst = document.getElementById("replytekst");
        var kopitjek=getHTMLOfSelection(kopitekst);
        if (kopitjek=='')
        {
            alert("Please select some content");
        }
        else
        {
            alert(kopitjek);
        }
    });
});

I have made a Jsfiddle

This is my first post here. Hopefully I done it right :-)

If you want to make some text unselectable in a specific div (or anywhere but in a selected div), I'm quite sure this is not possible, and everything you could try could be worked around by looking at the source anyway. Your only possibility is to create an image with that text in it... — Laurent S., Dec 06 '13 at 15:27
@Bartdude making text unselectable can be done using CSS but i guess it is not what OP is looking for — A. Wolff, Dec 06 '13 at 15:29
you can try with that answer [http://stackoverflow.com/a/5801903/2359055](http://stackoverflow.com/a/5801903/2359055) — Abraham Uribe, Dec 06 '13 at 15:32
@A.Wolff : Yes, that's why I added the "looking at the source code" workaround. There is no way (that I know) to prevent the user to copy text from the site, you can just make the task more or less difficult, but then you have to wonder if that's worth the efforts. — Laurent S., Dec 06 '13 at 15:34
I know how to avoid to be able to copy text with CSS, but I'd rather be able to determine what parts to be copied — Mr. Mox, Dec 08 '13 at 14:10

score 0 · Answer 1 · answered Dec 06 '13 at 15:29

That's because it checks the entire document with:

if (document.selection && document.selection.createRange) {
    range = document.selection.createRange();
    return range.htmlText;
}

Not a specific section. If you want to check specific sections for selected text, you need to identify that you are searching for them in the search selection, something that nails your range down to a particular div:

range = $('#replytekst');

score 0 · Answer 2 · answered Dec 06 '13 at 15:32

0

Specify a particular DOM element instead of using document object.

var oDiv = document.getElementById( 'selDiv' );

then use

if ( oDiv.selection && oDiv.selection.createRange ) {

    range = oDiv.selection.createRange();
    return range.htmlText;

}

answered Dec 06 '13 at 15:32

I do not understand how I should put it in, can you make an example? – Mr. Mox Dec 08 '13 at 14:06

score 0 · Answer 3 · edited May 23 '17 at 11:57

0

You need to check if the section contains the selection. This is separate from getting the selection. There is a method for doing this in this answer: How to know if selected text is inside a specific div

edited May 23 '17 at 11:57

Community

1
1

answered Dec 06 '13 at 15:33

zachallia

1,495
12
16

tewathia · Answer 4 · 2013-12-08T14:20:48.717

0

I've updated your fiddle

Basically you need to check the id of the parent/ascendant of the selected text node.

selection.baseNode.parentElement.id or selection.baseNode.parentElement.parentElement.id will give you that.

Edit: I've thought of another, somewhat hack-y, way of doing it.

If

kopitekst.innerHTML.indexOf(kopitjek) !== -1

gives true, you've selected the right text.

DEMO1

DEMO2

(these work in Chrome and Firefox, but you might want to restructure the getHTMLOfSelection function a little)

edited Dec 08 '13 at 14:20

answered Dec 06 '13 at 15:50

tewathia

6,890
3
22
27

Your Fiddle works fine in Chrome, but unfortunately it does not work in Explorer and Firefox :-( – Mr. Mox Dec 08 '13 at 14:04
@Mr.Mox Try the other suggestion then, it's not browser-specific(unlike the `selection.baseNode` thing). I've added another fiddle to the answer – tewathia Dec 08 '13 at 14:23

score 0 · Answer 5 · answered Dec 09 '13 at 07:12

If it possible for you I recommend to use rangy framework. Then your code might look like this:

// get the selection
var sel = rangy.getSelection();
var ranges = sel.getAllRanges();
if (!sel.toString() || !sel.toString().length)
    return;

// create range for element, where selection is allowed
var cutRange = rangy.createRange();  
cutRange.selectNode(document.getElementById("replytekst"));

// make an array of intersections of current selection ranges and the cutRange
var goodRanges = [];
$.each(ranges, function(j, tr) {
    var rr = cutRange.intersection(tr);
    if (rr)
        goodRanges.push(rr);
});
sel.setRanges(goodRanges);

// do what you want with corrected selection
alert(sel.toString());
// release
sel.detach();

In this code if text was selected in your specific div then it will be kept, if there was selection where other elements take part too, these selection ranges will be cut off.

Get HTML of selection in a specific div

5 Answers5

Linked