Text highlighting in html page

Question

I am working in HTML with jquery.

I want to make a webpage to highlight some text lines (line nos 15, 22, 32) in that page at a time. This can be done by left click in mouse and drag that line, so that the text line is selected with blue background.

I am able to get the selected lines as follows using jquery,

    function getText() {
        var text = "";
        if (window.getSelection) {
            text = window.getSelection().toString();
        } else if (document.selection && document.selection.type != "Control") {
            text = document.selection.createRange().text;
        }
        console.log('text-----------'+text)
    }

When I am clicking other line, first selected line was disappears. I need that line also be available. (In MSword, we can hold ctrl and drag the lines and it will be available)

For multiple selection, I know there is more plugins available in web. But I am looking for doing this selection using Javascript or jquery.

This is what I am looking for to do in my page, want to select texts and get them in my javascript function.

How may we do this?

Answer 1

This answer is combined of some issues.

1. Get the selection text
2. Mark it.
3. Copy to clipboard

It's not the full solution but there are all the parts.

So:

 var output = ''; $('#test').mouseup(function () { output += getSelectedText(); highlightSelected(); copyOutput(); $('#result').html(output); }); function getSelectedText() { if (window.getSelection) { return window.getSelection().toString(); } else if (document.selection) { return document.selection.createRange().text; } return ''; } function highlightSelected() { var SelRange; if (window.getSelection) { SelRange = window.getSelection().getRangeAt(0); } else if (document.getSelection) { SelRange = document.getSelection().getRangeAt(0); } else if (document.selection) { SelRange = document.selection.createRange(); } if (SelRange.pasteHTML) { SelRange.pasteHTML('<span class="hilited1">' + SelRange.text + '</span>'); } else { var newNode = $('<span class="hilited1" />')[0]; SelRange.surroundContents(newNode); } } function copyOutput() { var emailLink = document.querySelector('#result'); var range = document.createRange(); range.selectNode(emailLink); window.getSelection().removeAllRanges(); window.getSelection().addRange(range); try { var successful = document.execCommand('copy'); } catch (err) { console.log('Oops, unable to copy'); } window.getSelection().removeAllRanges(); } 

 textarea { width:100%; height:150px; } .hilited1 { background:red; color:#fff; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="test">I am working in HTML with jquery. I want to make a webpage to highlight some text lines (line nos 15, 22, 32) in that page at a time. This can be done by left click in mouse and drag that line, so that the text line is selected with blue background. I am able to get the selected lines as follows using jquery, </div> <hr /> <div id="result"></div> <hr /> <textarea placeholder="Try to paste here"></textarea>