У меня есть HTML-документ, содержащий около 30 000 слов.
Я хотел бы что-нибудь сделать, когда пользователь нажимает на любое слово. Для простоты/концепции прямо сейчас я просто хотел бы alert() это слово.
Например, в абзаце о том, если бы я нажал кнопку "have", он должен запустить alert("have").
Я использую jQuery.
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) });
Я принял во внимание Пабло Фернандес.
Итак, будет ли это работать (например, он не затормозит медленный браузер пользователя?) Также вы могли бы рассказать о том, как работает event.target?
Это может очень сильно замедлить работу страницы с 30 000 слов. Я бы сказал, что это чрезмерно и, вероятно, выиграет от разбивки на страницы, но я не знаю ваших конкретных обстоятельств.
event.target свойство содержит элемент, который запустил событие - событие пузырится вверх/распространяется на его родительский элемент, который затем обрабатывает событие, поэтому у вас нет 30 000 событий на отдельных элементах span.
К сожалению, я думаю, вам нужно обработать текст и поместить <span class ='clickableWord'> YOUR_WORD </span> вокруг каждого слова.
Тогда:
$(".clickableWord").click(
function(this){alert(this.text());}
);
Любой метод, который пытается использовать абсолютное позиционирование для поиска слова, подвержен проблемам с масштабированием, размерами шрифтов и т.д.
Здесь был рассмотрен Получение текста при щелчке по элементу HTML
Существует ли HTML-документ статический или вы его генерируете? Если вы его генерируете, тогда не должно быть слишком сложно добавлять теги вокруг каждого слова.
Если вам нужно сделать это с существующим HTML после факта, то это немного сложнее. Выберите элементы (возможно, div или p), которые содержат большинство слов и читают эти слова в массив. Затем повторно выведите их, за которыми следуют те теги span
Я немного опаздываю на вечеринку, которую вижу.
Попробуйте этот вариант.
<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);
}
}
Я не прошел через код, чтобы опубликовать, как именно это делается, но факт заключается в том, что это делается здесь, не вставляя никаких дополнительных span или других элементов в предложение.