Получить слово в пунктах

Ответ 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) });

Я принял во внимание Пабло Фернандес.

Посмотрите на jsFiddle.

Update

Итак, будет ли это работать (например, он не затормозит медленный браузер пользователя?) Также вы могли бы рассказать о том, как работает event.target?

Это может очень сильно замедлить работу страницы с 30 000 слов. Я бы сказал, что это чрезмерно и, вероятно, выиграет от разбивки на страницы, но я не знаю ваших конкретных обстоятельств.

event.target свойство содержит элемент, который запустил событие - событие пузырится вверх/распространяется на его родительский элемент, который затем обрабатывает событие, поэтому у вас нет 30 000 событий на отдельных элементах span.

Ответ 2

К сожалению, я думаю, вам нужно обработать текст и поместить <span class ='clickableWord'> YOUR_WORD </span> вокруг каждого слова.

Тогда:

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

Любой метод, который пытается использовать абсолютное позиционирование для поиска слова, подвержен проблемам с масштабированием, размерами шрифтов и т.д.

Здесь был рассмотрен Получение текста при щелчке по элементу HTML

Существует ли HTML-документ статический или вы его генерируете? Если вы его генерируете, тогда не должно быть слишком сложно добавлять теги вокруг каждого слова.

Если вам нужно сделать это с существующим HTML после факта, то это немного сложнее. Выберите элементы (возможно, div или p), которые содержат большинство слов и читают эти слова в массив. Затем повторно выведите их, за которыми следуют те теги span

Ответ 3

Я немного опаздываю на вечеринку, которую вижу.

Попробуйте этот вариант.

<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/

Ответ 4

Я не прошел через код, чтобы опубликовать, как именно это делается, но факт заключается в том, что это делается здесь, не вставляя никаких дополнительных span или других элементов в предложение.

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