Get HTML Copy of the Selection

Javascript Code Snippet to get the HTML of the page selected. Usually when we select a text in HTML page, what we get is the rendered text as selection but with this code, we can get its underlying HTML.

?

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53

// ================================================================= // ++++++++++++     Get Range Selected Nodes    start   ++++++++++++ // ++++++++++++     Courtesy to  Tim Down @tpdown       ++++++++++++ // +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ function nextNode(node) {     if (node.hasChildNodes()) {         return node.firstChild;     } else {         while (node && !node.nextSibling) {             node = node.parentNode;         }         if (!node) {             return null;         }         return node.nextSibling;     } } function getRangeSelectedNodes(range) {     var node = range.startContainer;     var endNode = range.endContainer;     // Special case for a range that is contained within a single node     if (node == endNode) {         return [node];     }     // Iterate nodes until we hit the end container     var rangeNodes = [];     while (node && node != endNode) {         rangeNodes.push( node = nextNode(node) );     }     // Add partially selected nodes at the start of the range     node = range.startContainer;     while (node && node != range.commonAncestorContainer) {         rangeNodes.unshift(node);         node = node.parentNode;     }     return rangeNodes; } function getSelectedNodes() {     if (window.getSelection) {         var sel = window.getSelection();         if (!sel.isCollapsed) {             return getRangeSelectedNodes(sel.getRangeAt(0));         }     }     return []; }

// =================================================================
// ++++++++++++     Get Range Selected Nodes    start   ++++++++++++
// ++++++++++++     Courtesy to  Tim Down @tpdown       ++++++++++++
// +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

function nextNode(node) {
    if (node.hasChildNodes()) {
        return node.firstChild;
    } else {
        while (node && !node.nextSibling) {
            node = node.parentNode;
        }
        if (!node) {
            return null;
        }
        return node.nextSibling;
    }
}

function getRangeSelectedNodes(range) {
    var node = range.startContainer;
    var endNode = range.endContainer;

    // Special case for a range that is contained within a single node
    if (node == endNode) {
        return [node];
    }

    // Iterate nodes until we hit the end container
    var rangeNodes = [];
    while (node && node != endNode) {
        rangeNodes.push( node = nextNode(node) );
    }

    // Add partially selected nodes at the start of the range
    node = range.startContainer;
    while (node && node != range.commonAncestorContainer) {
        rangeNodes.unshift(node);
        node = node.parentNode;
    }

    return rangeNodes;
}

function getSelectedNodes() {
    if (window.getSelection) {
        var sel = window.getSelection();
        if (!sel.isCollapsed) {
            return getRangeSelectedNodes(sel.getRangeAt(0));
        }
    }
    return [];
}

Attach a copy event listener to the Body of html page and call a event handler to process the selected nodes using the getSelectedNodes().

?

1	commonjsAddEvent(document.body,'copy',handleCopyFn) ;

commonjsAddEvent(document.body,'copy',handleCopyFn) ;

Use this code snippet to safely attach and detach handlers to events.