javascript: select sentence in a paragraph

Question

I want to create a text annotation tool. Suppose we have some texts displayed like in the picture below, the objective effect is: after the user click on somewhere in the text, the whole sentence is automatically selected and highlighted.

enter image description here

I have no idea how to achieve that effects. Can someone points me either codes or resources that can solve this problem?

Thanks!

You wanna select only one at time? – felipekm Jul 01 '14 at 01:25 — felipekm, Jul 01 '14 at 01:25
Yep. select only one sentence in a paragraph – user3352464 Jul 01 '14 at 02:21 — user3352464, Jul 01 '14 at 02:21
Great, the last reply fits you perfectly – felipekm Jul 01 '14 at 02:58 — felipekm, Jul 01 '14 at 02:58

score 2 · Answer 1 · answered Jul 01 '14 at 01:33

Here you go:

http://jsfiddle.net/r3wt/6gf25/1/

toggles one sentence at a time, hiding highlight from previously toggled sentences.

<div class="paragraph">
    <p class="sentence">Blah bdsfaflsdajflasdfslah blah,Yah Yahasdaflasdkfjasdlfjsdafasd Yah Nah. </p>
    <p class="sentence">Blasdfasdah bdsfaflsdajflasdfslah blah,Yah Yahasdlfjsdkaflasdkfjasdlfjsdafasd Yah, Nah NAh Nah. </p>
    <p class="sentence">Blah bdsfaflslajfdladajflasdfslah blah,Yah Yahasdlfjsdkaflasdkfjasdlfjsdafasd Yah, Nah NAh Nah. </p>
    <p class="sentence">Blah bdsfaflsdajflasdfslah blah,Yah Yahasdlfjsdkaflasdkfjasdlfjsdafasadsfasdd Yah, NadfasdfasdfaAh Nah. </p>
    <p class="sentence">Blah bdsfaflsdajflasdfslah blah,Yah Yahasdlfjsdkaflasdkfjasdlfjsdafasd Yah, Nah NAh Nah. </p>
    <p class="sentence">Blah bdsfaflsdajflasdfslah blah,Yah Yahasdlfjsdkaflasd Nah. </p>
    <p class="sentence">Blah bdsfaflsdajflasdfslah blah,Yah Yahasdlfjsdkaflasdkfjasdlfjsdafasd Yah, Nah NAh Nah. </p>
    <p class="sentence">Blah bdsfaflsdajflasdfslah blah,YaZAHah NAh Nah. </p>
</div>
<script type="text/javascript">
$(function(){
    $('.sentence').click(function(){
        $('.highlight').toggleClass('highlight');
        $(this).toggleClass('highlight');
    });
});
</script>
<style type="text/css">
<!--
.paragraph { width: 95%; padding: 5px; margin: 5px; background: #fff;}
.sentence { width: 100%; display: inline;}
.highlight{ background-color: #FC9A24}
-->
</style>

score 1 · Answer 2 · answered Jul 01 '14 at 01:22

1

pseudocode (might actually work):

$(".class").click(function () {
    $(this).css("background-color", "#ff0000");
});

and assign this class to all p tags

answered Jul 01 '14 at 01:22

andypopa

536
6
15

score 1 · Answer 3 · edited May 23 '17 at 12:01

1

if each of the sentences have a common class (say 'chat-sentence'), we could do it by,

$('.chat-sentence').click(function() {
    $(this).select(); 
});

A generic fn which works across all browsers is given here

edited May 23 '17 at 12:01

Community

1
1

answered Jul 01 '14 at 01:23

vasa

787
8
21

score 1 · Answer 4 · answered Jul 01 '14 at 01:34

I'm pretty sure that you are new on this, so I'll explain some details:

Start getting jQuery up and running in a minute or less:

Insert this into your HTML (most commonly in the head, but you can throw it before the end body tag too):

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

Then place a script element after your jQuery one. It will toggle the Style of your sentences.

<script>
  $(function() { 
    $('.sentence').click(function() {
      $(this).toggleClass('sentenceStyle');
    });
  });
</script>

Now you need to apply the Styles (CSS)

Placed a style element after your tag:

<style>
  .sentenceStyle {
    background-color: red;
    color: white;
    font-size: 14px;
}
</style>

Now you are ready to go! Here's the fiddle in case your get confused.

javascript: select sentence in a paragraph

4 Answers4