選擇div中文本的一部分

Question

我有一個SVG元素，我在其中創建了一個foreignObject。 foreignObject包含兩個對象textarea和div。 textarea位於div的頂部，並且是透明的。當人們輸入textarea時，文本被複制到div（一種所見即所得的編輯器）。這一切工作正常。但問題是：當你選擇textarea中的文本（100％透明）時，你看不到你選擇了哪些文本，所以現在我想創建一個代碼，將選擇複製到div中的文本中。

我有以下的要位，此位會告訴我什麼是在textarea的選擇：

var start = e.target.selectionStart; 
var end = e.target.selectionEnd; 

（e是一個選擇的EventListener的事件）

與以下選擇文本該div：

div = $(e.target).next('div'); 
div = div[0]; 

selection = window.getSelection(); 
range = document.createRange(); 
range.selectNodeContents(div); 
selection.addRange(range); 

這樣的工作，但選擇div中的所有文本。我如何限制選擇只有在textarea中選擇的部分？

（此代碼是一個演示應用程序，只需要在Firefox的工作方式）

Answer 1

我也有類似的問題。我的解決方案是在執行轉換時將兩個空的HTML元素（可能是<span class="sel-start"/>和<span class="sel-end"/>）添加到輸出div。

您可以使用相同的技巧在div中顯示文本光標，因此用戶更容易看到他們現在在哪裏。另外，您可以使用文本光標滾動div，這樣可以減少屏幕空間。

選擇它們很簡單，它們將文本切分成多個段，您可以輕鬆地將它們包裹在<span class="selected">...</span>元素中進行設計。

請注意，使用單個span並不聰明，因爲選擇可能會跨越塊元素（p,div，列表，表格）。