get word click in paragraphs

Question

I have an HTML document with about 30,000 words in it.

I'd like to be able to do something when a user clicks any word. For simplicity/concept right now, I'd just like to alert() that word.

For example, in the paragraph about, if I were to click on "have" it should run alert("have").

I'm using jQuery.

Uphold

as @Chintsu mentioned under my answer, this answer provides better solution in my opinion, without inserting any extra elements https://mcmap.net/q/335232/-detect-which-word-has-been-clicked-on-within-a-text – Jakoba

Answer 1

var p = $('p');

p
 .html(function(index, oldHtml) {
    return oldHtml.replace(/\b(\w+?)\b/g, '<span class="word">$1</span>')
 })
 .click(function(event) { alert(event.target.innerHTML) });

I took Pablo Fernandez's suggestions into account.

See it on jsFiddle.

Update

So, will this be performant (e.g., it won't freeze up a slow user's browser?) Also, could you elaborate about how event.target works?

It may very well slow the performance of a page with 30,000 words. I'd argue that is excessive and probably would benefit from being paginated, but I don't know your exact circumstances.

event.target property holds the element that started the event - the event bubbles up / propagates to its parent, which then handles the event, so you don't have 30,000 events on separate span elements.

Drippy

This will create 30k event handlers. DONT DO THIS – Nemhauser

@Pablo Fernandez I know, but how else can you determine which one was clicked? If you let it propagate to the parent, can you tell where it started? – Drippy

also it will remove all whitespace from the text – Nemhauser

@Drippy yes, using the event.target property – Nemhauser

@Pablo Fernandez It didn't remove any whitespace for me. Check the example. – Drippy

@Pablo Fernandez OK, I forgot about that. Let me change it up. Thanks for your input. – Drippy

@alex, my bad. Your answer is awesome if you fix the event handler things +1 – Nemhauser

@Pablo Fernandez Thanks, I updated and cited your help for update. (I would upvote yours, but you have since deleted it). – Drippy

Good edit, +1. :) You could probably also use jQuery Live for this, but I don't know the performance implications of that. – Orobanchaceous

@Drippy yes no need for mine since it was similar to yours (but less elegant) – Nemhauser

So, will this be performant (e.g., it won't freeze up a slow user's browser?) Also, could you elaborate about how event.target works? – Uphold

@musicreak live() would only be useful if they plan to modify the text later, and it would also require running the regex to wrap words again with span elements. I'll leave that decision to the OP. – Drippy

Pathetic idea , if you have large Html your page will be faked off .. Not recomended – Sufism

@UsmanY I think I understand what it is you're trying to say. But you could try structuring your point better and not being a dick. – Drippy

Answer 2

Unfortunately I think you'll need to process the text and put a <span class ='clickableWord'> YOUR_WORD </span> around every word.

Then:

$(".clickableWord").click(
             function(this){alert(this.text());}
                         );

Any method that tries to use absolute positioning to locate the word is liable to problems with zooming, font sizes, etc.

It's been addressed here Getting text at clicked location in an HTML element

Is there HTML doc static or are you generating it? If you are generating it then it shouldnt be too tough to add those tags around each word.

If you need to do it to an existing HTML after the fact then this is a little harder. Pick the elements (probably div or p) that contain most of the words and read these words into an array. Then re-output them followed by those span tags

Spacecraft

Answer 3

I'm a little late to the party I see.

Try this one out.

<div id="text"><!-- text --></div>

init()

function init()
{
    addListeners();
    adjustText(document.getElementById("text"));   
}

function addListeners()
{
    document.body.onclick = clicked;   
}

function adjustText(holder)
{
    text = holder.innerHTML.split(" ");
    holder.innerHTML = "";
    for(var i=0;i<text.length;i++)
    {
        text[i] = text[i].replace("\n", "");
        var newText = document.createElement("span");
        var leadSpace = document.createTextNode(" ");
        var endSpace = document.createTextNode(" ");
        newText.innerHTML = text[i];
        holder.appendChild(leadSpace);
        holder.appendChild(newText);
        holder.appendChild(endSpace);
    }
}

function clicked(evt)
{
    if(evt.target.tagName == "SPAN" && evt.target.innerHTML)
    {
        alert(evt.target.innerHTML);
    }  
}

http://jsfiddle.net/AdwCA/2/

Elevation

Answer 4

I did not go through the code to post how exactly it is done, but it is fact that this is done in here, without inserting any extra spans or other elements into the sentence.

http://www.wordreference.com/enit/something

Jakoba

Apparently it works like explained in this answer – Purr

@Chintsu, it looks like it is – Jakoba