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?

this question is not clear. Can you try and explain clearer? — Liam, Dec 09 '15 at 11:58
You can style selected text using `::selection ` pseudo class. — Shanavas M, Dec 09 '15 at 12:05
`For multiple selection` What is your final goal? Just style? Or you want that you could `copy` the selection texts? — Mosh Feu, Dec 09 '15 at 13:48
And if you will do `paste` it will paste all the texts together? — Mosh Feu, Dec 10 '15 at 09:28
Copying requires Flash for some reason, might not work on Firefox. — Yaron, Dec 10 '15 at 09:31
Ok, is there possible to mark the background color of the texts in webpage? — , Dec 10 '15 at 09:32
so you copied this answer http://stackoverflow.com/questions/5379120/get-the-highlighted-selected-text changed the function name and want us to do the work? — caramba, Dec 10 '15 at 09:42
@MoshFeu I'm just trying to say that he didn't try anything really showing any effort how he could solve the "multy-selection" part.. — caramba, Dec 10 '15 at 09:48
@caramba, do you know I didn't do anything? mind your words, especially over the web. If you dont know what to do, then just leave it. This is what the difference between poor or ordinary developers like you and complete professionals. Complete professionals knows well what happened in background. You proved it here. — , Dec 10 '15 at 10:19

Mosh Feu · Accepted Answer · 2015-12-11T09:28:57.977

This answer is combined of some issues.

Get the selection text
Mark it.
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>

Thank you so much @Mosh.This looks similar. I got some ideas to get some thoughts from your help. My requirement is bit different. Anyway, this is very much helpful for me. — , Dec 11 '15 at 04:51
If I am having two
tag inside the div id test, then this highlight doesn't works. Can we get this? also can we remove the bit of content from the selected content. For example, If initially I selected 100 chars wrongly, can we change it to 80 chars by not highlighting the remaining 20 chars by aain select them. — , Jan 16 '16 at 16:04

Text highlighting in html page

1 Answers1

Linked

Related