window.getSelection（）。getRangeAt（）无法正常工作

我试图在一个html元素中选择文本，然后在它周围插入span标签。 到目前为止，我遇到了正确的索引问题。 如果我在

块中突出显示文本，则索引在
标记后变为0。 我希望能够将文本切片（），然后在突出显示文本之后将其与span标签重新组合，以及抓取所选文本并通过Ajax将其发送到服务器。

以下是一些示例HTML和代码：

 
This is some sample text.
Select this text. 

jQuery的：

 $('*').mouseup(function() { mouseDown = false; var startIndex = window.getSelection().getRangeAt(0).startOffset; var endIndex = window.getSelection().getRangeAt(0).endOffset; alert($(body *).text().slice(startIndex, endIndex)); }); 

Answer 1

好吧，我看了你的jsfiddle上的代码，问题似乎是javascript不知道什么是“highlightElement”，所以我在jsfiddle上为你嘲笑了一个小小的演示….

它有点脆弱但它应该做你需要它做的事： http ： //jsfiddle.net/WRrH9/5/

如果它由于某种原因不起作用inheritance你的代码修改：

HTML：

     
This is some sample text.Select this text. 
  ​ 

JavaScript的：

 $('body *').mouseup(function() { mouseDown=false; var startIndex = window.getSelection().getRangeAt(0).startOffset; var endIndex = window.getSelection().getRangeAt(0).endOffset; var slicedText = $(this).text().slice(startIndex, endIndex); $(this).html($(this).text().replace(slicedText,'' + slicedText + '')); });​ 

希望这可以帮助！

Answer 2

范围边界偏移相对于包含范围边界的最内部节点，因此您尝试的内容在一般情况下不起作用。

您可能会发现通过document.execCommand()提供的其中一个命令可以完成这项工作。 如果不这样做，如果你想保持换行等格式化，那么这是一个非常重要的任务，因为你需要在标签内围绕选择内的每个文本节点。 如果你的跨度有特定的CSS类，那么你可以使用我的Rangy库的CSS类应用程序模块。