Live text highlight

Question

Hello I am new with JavaScript trying to find solution for my problem. Is there any way I can live highlight my text like we do in PDF's ?

Something like this: Plunker

Relevant Code

<div class="box">
   llentesque volutpat tempus eleifend. Integer viverra erat ante. Aliquam    
   gravida ac nibh non sollicitudin.
 </div>

<button type="button">highlight</button>

I have a button which allow/enable text highlighting on click. Then I drag my mouse selecting texts will get yellow background color.

Is this possible ? Any example will really help. Thanks

Demo

var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) { });

.box span {
  background: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-controller="MainCtrl">
  <div class="box">llentesque volutpat tempus eleifend. Integer viverra erat ante. Aliquam gravida ac nibh non sollicitudin.</div>
  <button type="button">highlight</button>
  <div class="box" style="margin-top:100px">
    DEMO:
    <br>llentesque volutpat tempus eleifend. Integer viverra erat ante. <span>Aliquam gravida ac nibh non sollicitudin.</span>
  </div>
</div>

I can give you an idea. With `window.getSelection().toString()` you can get the selected text. Now on button click, find this part and wrap it in a span element which has a background color. — TheFrozenOne, Apr 17 '15 at 14:56

score 1 · Answer 1 · edited Apr 17 '15 at 15:32

1

here's a quick example that I made for you to play with. Basically you want some sort of event, I think on('input') works well here, and then check to see if there is a <span> element somewhere.

This is not a complete example of course, and could use some more work, but it should get you started.

$('#textarea').on('input', function() {
    var text = $('#textarea').val();
    $('#result').html(text);
    if ($('#result').html().indexOf('<span>') > -1) {
        $('span:not(.highlighted)').addClass('highlighted');
    }
});

// Set the value initially and trigger the event.
$('#textarea').val('Hello <span>World</span>.').trigger('input');

textarea {
    width: 196px;
    height: 100px;
}
#result {
    border: 1px solid gray;
    width: 200px;
    height: 200px;
    overflow: scroll;
}
.highlighted {
    background: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id='textarea'></textarea>
<div id='result'></div>

edited Apr 17 '15 at 15:32

Mr. Polywhirl

42,981
12
84
132

answered Apr 17 '15 at 15:25

Abdul Ahmad

9,673
16
64
127

1

I added your external demo inline so others don't have to navigate away from Stack Overflow. – Mr. Polywhirl Apr 17 '15 at 15:31
I point: I added span in the example to make it look like how I wanted. There should not be any span. This is something like: After I click the button it will enable highlighting mode and then Drag my mouse selecting the texts. Texts background will get yellow up I selected. – iamlearner Apr 17 '15 at 15:53
I'm not sure what you mean – Abdul Ahmad Apr 17 '15 at 16:10

score 1 · Accepted Answer · edited May 23 '17 at 11:50

1

The Stack Overflow entry covers numerous methods for highlighting text on a page using javascript:

How to highlight text using javascript

If this isn't what you wanted, comment below.

edited May 23 '17 at 11:50

Community

1
1

answered Apr 17 '15 at 15:31

Ben Rondeau

2,983
1
15
21

Thanks for this article. I am following the instruction if I can make it works – iamlearner Apr 17 '15 at 15:56
If it proves to be a good solution, mark this response as the answer to your question so it makes it more visible to others who have the same question. Thanks! – Ben Rondeau Apr 17 '15 at 15:57
Link is no longer available. This answer is useless. – Ray Feb 23 '16 at 08:32

Live text highlight

Relevant Code

Demo

2 Answers2