选择div中文本的一部分

Question

我有一个SVG元素，我在其中创建了一个foreignObject。 foreignObject包含两个对象：textarea和div。 textarea位于div的顶部并且是透明的。当人们在textarea中输入时，文本被复制到div（WYSIWYG类型的编辑器）。一切正常。但问题是：当您在textarea（100％透明）中选择文本时，您无法看到所选的文本，因此现在我想创建一个将选区复制到div中文本的代码。 / p>

我有以下内容，这些位告诉我在textarea中选择了什么：

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

（e是select 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

我有类似的问题。我的解决方案是在进行转换时向输出<span class="sel-start"/>添加两个空HTML元素（可能是<span class="sel-end"/>和div）。

您可以使用相同的技巧在div中显示文字光标，这样用户就可以更轻松地查看他们现在的位置。另外，您可以使用文本光标滚动div，以免浪费更少的屏幕空间。

选择这些内容很简单，他们将文本剪切成段，您可以轻松地将其包裹在<span class="selected">...</span>元素中以对其进行样式化。

请注意，使用单个span并不聪明，因为选择可能会跨越块元素（p，div，列表，表格。