JavaScript字符串點擊位置

如果我在一個divJavaScript字符串點擊位置

<div id="article"> 
lots of text goes here 
<strong> it's really interesting</strong> 
and it's free to read 
</div>

如果用戶雙擊或單點擊一個特定的詞，有沒有一種方法來確定單擊的字符的位置/索引有一個字符串？

如果做不到這一點，那麼如何確定點擊位置之前有多少空間字符。所以如果我在上面的例子中點擊'去'這個詞，它會返回3，因爲在單詞被點擊之前有三個空格。

非常感謝您的時間。

來源

2010-06-22 Nik So

這種問題的醜陋解決方案涉及將字符轉換爲事件捕獲對象。

例如

<div id="article"> 
<span>lots </span><span>of </span><span>text</span>... 
</div>

現在，這可以通過編程來完成。您可以抓取div的當前內容並將其轉換爲上面的格式。然後將事件處理程序附加到包含的跨度，該跨度計算同一個容器中的跨度數。

來源

2010-06-22 02:13:06

我明白了。所以我會做一個替換（/（\ b \ w * \ b）/，' $ 1'），這是正確的嗎？ – 2010-06-22 02:20:55

我還會加入尾部空格（所以即使用戶單擊單詞之間的空格時也可以捕獲事件）。要附加事件，請嘗試使用document.getElementById（'article'）。getElementsByTagName（'span'）並通過它們循環連接相同的onclick事件處理程序。 – Andrew 2010-06-22 02:38:53

@Andrew這是一個很好的觀點。不捕獲對空間的點擊會很煩人。編輯以反映 – 2010-06-22 02:52:08

一種方法來確定的字符的位置/索引點擊

嗯，首先我需要使用固定寬度的字體大小等信使。然後，我會創建兩個跨度，每個只有一個字符。有了這兩個，我應該能夠知道char的寬度（當心填充和邊距）及其高度。然後，您需要知道您的div的左上角座標，其ID爲'文章'，並捕獲具有event.x和event.y的點擊事件。

之後，

var line = (event.x - divLeft)/charHeight; 
var column = (event.y - divTop)/charWidth;

來源

2010-06-22 02:21:27 user347594

這是一個很酷的解決方案。我認爲換行符會有問題，除非手動插入。你還需要派生你的'charHeight'和'charWidth'，因爲你不能指望跨平臺的相同值。如果您的滾動條顯示較長的文本，則這不起作用，但您也可以逐個字符地構建（或重建）字符串以查看換行符的位置。你也可以使用這種技術來繪製每個字母的x/y座標 - 但這是巨大的矯枉過正。 – Andrew 2010-06-22 02:45:09

我就這麼說！我將與他們一起進行體驗，然後回過頭來看看，當然，這對我的項目有什麼好處。但這兩種解決方案都有意義 – 2010-06-22 03:16:18

滾動，很好的捕捉... – user347594 2010-06-22 13:19:04

JavaScript字符串點擊位置

回答

相關問題