轉化使用JavaScript

我的目標是能夠得到一個文檔中突出顯示的高亮顯示文本的元素中的文本，但前提是該文本是一個給定的區間內，然後單擊後應用某種風格到選定的文本div標記。我會解釋我的意思：轉化使用JavaScript

所以，說完看着window.getSelection()和document.selection.createRange().text，我試圖使用elmnt.getSelection()或elmnt.selection.createRange().text一些HTML元素，elmnt。然而，它似乎並沒有工作，所以這個想法似乎很空。這意味着我不能使用這個想法來確定給定位置內突出顯示的文本。在這種情況下，沒有任何意義，從本質上講，我想HTML代碼如下所示：

<body> 
    <div id="content">Stuff here will not be effected</div> 
    <div id="highlightable">Stuff here can be effected when highlighted</div> 
    <div id="morecontent">Stuff here will also not be effected</div> 
</body>

所以，每當我突出的文字，點擊指定的div將應用適當的CSS。現在

，到div標籤。基本上，這是我已經有了上：

$('.colorpicker').click(function(e) 
{ 
    console.log(getSelectedText()); 
}

最後，所有我想這個突出選定的文本，有div標籤更改所選文本的顏色，相應div標籤的，我已被選中。這些都不似乎是正確的現在的工作，我爲div標籤的唯一原因的猜測是，它無論unhighlights每當我點擊div標籤我有選擇的。

回退：

如果有'abc'是在頁面上發現，我強調上色'abc'超過一次，我想，只有'abc'該副本中突出顯示。

我知道這是一個很大的問題，但即使我能在這個想法上取得一個小小的開端，我的下一個個人項目將會更加順利。謝謝。 :)

來源

2010-04-12 ashays

解決這個問題的關鍵是使用代表瀏覽器中文本範圍的對象，而不是選定的文本本身。看看在Firefox的範圍和IE的TextRange對象都提供給您的方法。這兩個包含有自己的標記替換所選文本的方式（例如跨度包裹你選定的文本。）

對於FF的外觀到Range.getRangeAt（0）.surroundContents（元素）
對於IE看看TextRange.pasteHTML（）

我必須警告你，雖然...如果你經歷了這一點，你可能會結束了一個可怕的瀏覽器怪癖路徑。已經從一開始就需要支持兩種不同的對象有兩個主要的瀏覽器。

來源

2010-04-13 20:25:39 zincorp

轉化使用JavaScript

回答

相關問題