應用DIV /跨度標籤由特定座標字

示例HTML數據應用DIV /跨度標籤由特定座標字

<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的位置。但是如何突出位於特定位置的單詞？

讓我再解釋一遍。我想按位置突出顯示一個詞。

例如我有一個位置值（x，y）=（0,625）。我想提取該位置的第一個單詞（假設 - 在該位置 - 我們有單詞「世界」）然後如何突出顯示該單詞？

編輯：
這裏Y座標是整個HTML文件的絕對位置。

來源

2010-08-04 Sagar R. Kothari

突出顯示，你的意思是選擇它，或者你想要把它包裹在例如一個'span'標籤？ – 2010-08-04 11:03:46

我想在'span'標籤中包裝 - 示例'世界' – 2010-08-04 11:06:20

我應該讀過標題;） – 2010-08-04 11:18:43

我能想到的唯一方法是將每個單詞都包裹在span元素中，然後使用document.elementFromPoint(x,y)來獲取給定位置的span元素。事情是這樣的：在http://jsfiddle.net/BSHYp/1/show/light/

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]; 
}

示例 - 點擊一個單詞，看它突出。

這裏的一些重要的注意事項：

文本的每個塊必須被包裹在一個元件（如或<div>）。您應該在標籤中包裝段落，
給定位置（x，y）處的元素只能包含文本，無子元素HTML元素。帶有兄弟HTML元素的文本節點將刪除它們（例如，點擊Some text here中的「Some」或「here」將刪除標籤）。將它們劃分爲單獨的元素是沒有建立一個更復雜的程序唯一的解決辦法，
IE將拋出一個「未知的運行錯誤」如果您嘗試和塊級元素添加到標籤，
在很，可能會遇到性能問題的非常非常大的文本塊。在適用的地方將其分解。

來源

2010-08-04 11:58:04

哇:)優秀的一個。高超。只是看樣本鏈接。 :) – 2010-08-04 12:03:27

超棒的答案:)真棒:)你劃分整個段落到span標籤的單詞和得到該特定的單詞。令人敬畏的邏輯。 :)最後一個問題 - 在你的例子 - 它刪除以前的亮點 - 做什麼來保存它。你的正則表達式和innerText完全刪除以前的亮點。 – 2010-08-06 11:40:37

在您給出的示例鏈接上 - 在正常的點擊上，它刪除了以前的亮點。但點擊空白後，它允許多個亮點！:(@＃％ – 2010-08-06 11:44:01

應用DIV /跨度標籤由特定座標字

回答

相關問題