How to tap text on a Screen and select word

Question

I have been searching google for the best approach on how to allow a user to tap a word within a paragraph, on a phone or tablet, and the word they tapped on brings an action.

For best performance on any device, and the text being dynamic, whats the best approach using Jquery?

I was thinking having the text dynamically added and split the words and add them into labels, and having each label click event, but was not sure whether or not a better solution is out there ?

Thank you

Answer 1

Well, here's a 'first-cut' - FIDDLE.

The array represents what you read from a db.

Populate the text area with the array words, putting each word in a span with an appropriately labeled ID.

Click on the span and in this fiddle, the id pops up, but you could do anything you want.

If you could provide more details, perhaps we can refine it further.

What did you mean by "split" the text?

JS

var primarytext = ['Lorem','ipsum','dolor','sit','amet','consectetur','adipisicing','elit','sed','do','eiusmod','tempor','incididunt','ut','labore','et','dolore'];

populate();
$('span').on('click', function(){
     $('.putmehere').html(  $(this).attr( 'id' ) );
});

function populate()
{
 for(var n=0; n < primarytext.length; n++)
    {
      $('.mytextdiv').append('<span id=' + n + " '>" + primarytext[n] + ' </span>');
     } 
}