通过特定坐标将 DIV/Span 标签应用于单词答案

【问题标题】：Applying DIV/Span tag to a word by specific co-ordinates通过特定坐标将 DIV/Span 标签应用于单词
【发布时间】：2011-03-25 04:59:03
【问题描述】：

示例 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>

例如 -> “general”（在 ** 之间）位于 x=0 和 y=465。我知道 x,y 位置。但是如何突出显示位于特定位置的单词？

让我再解释一次。我想按位置突出显示一个单词。

例如，我有一个位置值 (x,y)=(0,625)。我想提取该位置的第一个单词（假设-在该位置-我们有单词“World”）那么如何突出显示该单词？

编辑：
这里Y坐标是整个html文档的绝对位置。

【问题讨论】：

高亮显示，你的意思是选择它或者你想把它包裹在例如span 标签？
我想用span标签包裹——例如World
我应该读过标题 ;)
也许你可以尝试动态生成一个正则表达式来选择/匹配单词“world”（使用前面和后面的单词）并使用replace应用额外的span标签。

标签： javascript dom html dhtml

【解决方案1】：

我能想到的唯一方法是将每个单词包装在一个 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/ 的示例 - 单击一个单词并观察它突出显示。

这里有一些重要的警告：

每个文本块都必须包含在一个元素中（例如 或<div>）。无论如何，您应该将段落包装在  标记中，
给定位置 (x, y) 的元素中必须只有文本，没有 HTML 子元素。具有同级 HTML 元素的文本节点将删除它们（例如，单击 Some text here 中的“某些”或“此处”将删除  标记）。将它们分成单独的  元素将是唯一的解决方案，而无需构建更复杂的例程，
如果您尝试将块级元素添加到  标记，IE 将抛出“未知运行时错误”，
在非常、非常、非常大的文本块上，您可能会遇到性能问题。在适用的情况下将它们分解。

【讨论】：

哇 :) 非常棒。高超。只是看示例链接。 :)
精湛的答案 :) 太棒了 :) 您将整个段落分成小块跨度标签的单词并获取该特定单词。厉害的逻辑。 :) 最后一个问题-在您的示例中-它删除了以前的突出显示-如何保存它。您的正则表达式和 innerText 完全删除了以前的突出显示。
在您给定的示例链接上 - 在正常点击时，它会删除以前的亮点。但点击空白后，它允许多个亮点！ :(@#%
@sugar：这又进入了复杂的领域，因为高亮元素成为文本节点的兄弟。一种选择是将坐标列表存储在数组中，然后循环遍历从行result = document.elementFromPoint(x,y); 到result[t] = ... 的每个坐标。这样，您将在 par.innerHTML = par[t]; 之前的 span 中包含几个单词。
啊哈！嗯！哦！ :-( 我是 Objective-c 开发人员。我很难理解 DOM、javascript 和正则表达式。:-( 无论如何，非常感谢您的#best Best Best# 帮助。希望我有能力投票更多和更多投票给你再次上升。:-)