Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

187
Vistas
get word click in paragraphs

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.

over 4 years ago · Santiago Trujillo
3 Respuestas
Responde la pregunta

0

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.

over 4 years ago · Santiago Trujillo Denunciar

0

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

over 4 years ago · Santiago Trujillo Denunciar

0

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/

over 4 years ago · Santiago Trujillo Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda