0

I want to have text that when click-dragged over, highlights the text and stores the highlighted text in a variable.

I'm not sure where I would start with this, from my research it looks like it might be possible with html5 and canvas but I'm not too experienced with html5 so any help is greatly appreciated.

Anthoney Kalasho
  • 51
  • 1
  • 3

1 Answers1

1

$(document).ready(function() {
    $(document).on('click', function() {
        var selection = '';
        if (window.getSelection) {
            selection = window.getSelection().toString();
        }
        else if (document.selection) {
            selection = document.selection.createRange().text;
        }
        $('.highlighted').append(selection + '<br/>');
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
aslkdfjasd thiasldfkjljaslkdjf kasjdlfj lkjasdlkfjl ajsdfll kjlasjdfl laskjdfl lkjasldkfjlakjsdfj;lkjlaksdlfkjl lkjasldkfjl asdfkj jasldjflj asdlkfjalskdjf lkkjasdlklfjlasjdlfkjasdkfjl asdlfjsaf
this is some random text

<br/><br/>
The following text was highlighted:<br/>
<div class="highlighted" style="font-weight:bold;"></div>
indubitablee
  • 8,136
  • 2
  • 25
  • 49
  • That is pretty much exactly what I was looking for, thank you. Is there a way I can make the newly highlighted text append to the previously highlighted text? – Anthoney Kalasho Jan 28 '15 at 19:19
  • @AnthoneyKalasho use .append instead of .html. Or get the original text from the highlighted div and append it to that string, then reset the html of the div – bmartin Jan 28 '15 at 19:20
  • @AnthoneyKalasho, i edited to accommodate the append (and added a line break so its not one paragraph of random letters lol) – indubitablee Jan 28 '15 at 19:21
  • @indubitablee Thank you, you both helped a ton – Anthoney Kalasho Jan 28 '15 at 19:26