Применение тега DIV / Span к слову по определенным координатам - PullRequest
Новая
       1

Применение тега DIV / Span к слову по определенным координатам

1 голос
/ 04 августа 2010

Пример HTML-данных 

<body style="width:300px;">
<h3>Long-Text</h3>
A simple tool to store and display texts longer than a few lines.
The search button will highlight all the words matching the name of objects that are members of the classes listed in searchedClasses, itself a member of the KeySet class. The highlighted words are hypertext.
Edit invokes wscripts/acedb.editor, which by default launches emacs. Edit that file to start another editor in its place.
Save will recover from the emacs but will not destroy it.
Read will read a text file, so you could Search it.
**general** grep is a way to annotate a set of longtexts versus the searchedClasses. It outputs an ace file that you can then hand check and read back in acedb to create XREF from longTexts to genes etc.
<h3>World Wide NotePad</h3>
World wide notepad is a small text editor similar to Microsoft's notepad but has some more useful features like an auto typer to make typing the same sentence or word more easy, also World Wide NotePad has a text to speech feature which reads all text in the current open document and speaks it out load to you.
<h3>Etelka Wide Text Pro Bold Italic</h3>
</body>

Например -> «общие» (между **) в x = 0 и y = 465.Я знаю положение х, у.Но как выделить слово, расположенное в определенном месте?

Позвольте мне объяснить еще раз.Я хочу выделить слово по местоположению.

например, у меня есть значение местоположения (x, y) = (0,625).Я хочу извлечь первое слово по этому месту (предположим - в этом месте - у нас есть слово "Мир"). Как выделить это слово?

Редактировать:
Здесь Yкоордината - это абсолютная позиция всего HTML-документа.

1 Ответ

2 голосов
/ 04 августа 2010

Единственный способ, который я могу придумать, заключается в том, чтобы обернуть каждое слово в элементе span, а затем использовать document.elementFromPoint (x, y) , чтобы получить элемент span в заданном место нахождения. Как то так: 

function highlightWordAtXY(x, y) {
    // Get the element containing the text
    var par = document.elementFromPoint(x, y),
        // textContent or innerText ?
        t = "textContent" in par ? "textContent" : "innerText",
        // Get the text of the element. No pun intended on the par[t].
        text = par[t],
        result;

    // Wrap a span around every word
    par.innerHTML = text.replace(/\b(\w+)\b/g, "<span>$1</span>");

    // Get the elementFromPoint again, should be a span this time
    result = document.elementFromPoint(x, y);

    // Check that we actually clicked on a word
    if (result == par)
        return false;

    // Wrap HTML text around the text at x, y
    result[t] = '<span class="highlight">' + result[t] + '</span>';

    // Restore the content with the wrapped text
    par.innerHTML = par[t];
}

Пример на http://jsfiddle.net/BSHYp/1/show/light/ - щелкните слово и посмотрите, как оно выделено.

Некоторые важные замечания здесь:

  • Каждый блок текста должен быть заключен в элемент (например, <p> или <div>). В любом случае вы должны заключать абзацы в теги <p>,
  • Элемент в данном месте (x, y) должен содержать только текст, без дочерних элементов HTML . У текстовых узлов с родственными HTML-элементами они будут удалены (например, при нажатии «Некоторые» или «здесь» в Some <b>text</b> here будут удалены теги <b>). Разделение их на отдельные элементы <span> было бы единственным решением без построения гораздо более сложной процедуры
  • IE выдаст «Неизвестную ошибку времени выполнения», если вы попытаетесь добавить элемент уровня блока в тег <p>,
  • На очень, очень, очень больших блоках текста вы можете столкнуться с проблемами производительности. Разбейте их, где это применимо.
...