getSelection without alt attribute and scripts in it?

Question

I'm using window.getSelection () to get the selected text. But, if i select an image too, it returns also altof an image.

EXAMPLE:

<img src="someSrc.jpg" alt="image_alt" /> My text here ... 

if i select an image too, it returns

image_alt My text here ...

But i need only

My text here ...

Is there any way to get only text, without alt?

Thanks much

Answer 1

The easiest way would be to use the toString() method of selection's Range(s), which is what window.getSelection().toString() is specified to do in the current version of WHATWG's new Range spec (although this is contrary to what some browsers do and may or may not change). The following will work with multiple selected ranges (which Mozilla supports) and also in IE < 9.

jsFiddle: http://jsfiddle.net/timdown/HkP2S/

Code:

function getSelectionRangeText() {
    var selText = "";
    if (window.getSelection) {
        var sel = window.getSelection(), rangeCount = sel.rangeCount;
        if (rangeCount) {
            for (var i = 0, rangeTexts = []; i < rangeCount; ++i) {
                rangeTexts.push("" + sel.getRangeAt(i));
            }
            selText = rangeTexts.join("");
        }
    } else if (document.selection && document.selection.type == "Text") {
        selText = document.selection.createRange().text;
    }
    return selText;
}

UPDATE

This solution includes text inside <script> and <style> elements. To remove this, you could use cloneContents() on the selection ranges and traverse the DOM of the resulting document fragments, collecting text only from text nodes not contained within <script> and <style> elements. You could also expand on this to remove text that is inside elements with CSS display: none.

jsFiddle: http://jsfiddle.net/timdown/HkP2S/2/

Code:

function getSelectionRangeText() {
    var selText = "", selTextParts = [];

    function getNodeText(node) {
        if (node.nodeType == 3) {
            selTextParts.push(node.data);
        } else if (node.hasChildNodes()
        && !(node.nodeType == 1 && /^(script|style)$/i.test(node.tagName))) {
            for (var child = node.firstChild; !!child; child = child.nextSibling) {
                getNodeText(child);
            }
        }
    }

    if (window.getSelection) {
        var sel = window.getSelection(), rangeCount = sel.rangeCount;
        if (rangeCount) {
            for (var i = 0; i < rangeCount; ++i) {
                getNodeText(sel.getRangeAt(i).cloneContents());
            }
            selText = selTextParts.join("");
        }
    } else if (document.selection && document.selection.type == "Text") {
        selText = document.selection.createRange().text;
    }
    return selText;
}

Answer 2

Try this:

window.getTextSelection = function() {
    //First get HTML Fragment of selection
    var html = window.getSelection().getRangeAt(0).cloneContents(); 
    //Return only the text
    return html.textContent||html.innerText;
}

In some cases you can simply disable the user selection via CSS: May you also can achieve this by disabling user-select for images:

img {
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -o-user-select: none;
        user-select: none;
}