通过特定坐标将DIV / Span标签应用于单词 [英] Applying DIV/Span tag to a word by specific co-ordinates
问题描述
样本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位置。但是如何突出显示位于特定位置的单词？
For example -> "general" (between ** ) is at x=0 and y=465. I know the x,y position. But How to highlight a word located at specific location ?
让我再一次解释一下。我想按位置突出显示一个字。
Let me explain once again. I want to highlight a word by location.
例如我有一个位置值（x，y）=（0,625）。我想提取该位置的第一个单词（假设 - 在那个位置 - 我们有单词世界）然后如何突出显示该单词？
for example I have a location value (x,y)=(0,625). I want to extract the first word by that location ( assume - at that location - we have word "World" ) Then how to highlight that word ?
编辑：
这里Y坐标是整个html文档的绝对位置。
Edit :
Here Y co-ordinate is absolute position of entire html document.
推荐答案
我可以想到的唯一方法涉及在span元素中包装每个单词，然后使用 document.elementFromPoint（x，y） 以获取指定位置的span元素。这样的东西：
The only method I can think of involves wrapping every word in a span element, and then using document.elementFromPoint(x,y) to get the span element at the given location. Something like this:
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/ - 点击一个字，并观看它突出显示。
Example at http://jsfiddle.net/BSHYp/1/show/light/ - click a word and watch it highlight.
这里有一些重要的注意事项：
Some important caveats here:
- 每个文本块都必须包装在一个元素（如
< p>或< div>）。您应该在< p>标签中包含段落 - 给定位置（x，y）上的元素只能有文字，没有小孩HTML元素。具有兄弟HTML元素的文本节点将被删除（例如，在
< b>标签）。将它们划分为单独的< span>元素将是唯一的解决方案，而不需要构建一个更复杂的例程， - IE将抛出如果您尝试将块级元素添加到
< p>标签 - ，非常非常非常，可能会遇到性能问题的大块文本。
- Each block of text must be wrapped in an element (such as
<p>or<div>). You should be wrapping paragraphs in<p>tags anyway, - The element at the given location (x, y) must only have text in it, no child HTML elements. Text nodes with sibling HTML elements will have them removed (e.g. Clicking "Some" or "here" in
Some <b>text</b> herewill remove the<b>tags). Dividing them into separate<span>elements would be the only solution without building a much more complex routine, - IE will throw an "Unknown runtime error" if you try and add a block level element to a
<p>tag, - On very, very, very large blocks of text you might run into performance issues. Break them up where applicable.
这篇关于通过特定坐标将DIV / Span标签应用于单词的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
