window.getSelection().getRangeAt() 无法正常工作答案

【问题标题】：window.getSelection().getRangeAt() not working properlywindow.getSelection().getRangeAt() 无法正常工作
【发布时间】：2012-06-25 16:15:19
【问题描述】：

我正在尝试在 html 元素中获取文本选择，然后在其周围插入 span 标签。到目前为止，我遇到了正确索引的问题。如果我突出显示 <p> 块内的文本，则索引在 <br> 标记之后变为 0。我希望能够将文本切片（）出来，然后在突出显示文本以及抓取选定的文本并通过 Ajax 将其发送到服务器后将其与 span 标签重新组合。

这里是一些示例 HTML 和代码：

<html><body><p>This is some sample text.<br>Select this text.</p></body></html>

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));
});

【问题讨论】：

标签： jquery range slice getselection

【解决方案1】：

好吧，我在 jsfiddle 上查看了您的代码，问题似乎是 javascript 不知道“highlightedElement”是什么，所以我在 jsfiddle 上为您模拟了一个小演示......

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

如果由于某种原因它不起作用，请修改您的代码：

HTML：

<html>
    <head>
    </head>
    <body>
        <p>This is some sample text.Select this text.
        </p>
    </body>
</html>

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,'<span>' + slicedText + '</span>'));
});

希望这会有所帮助！

【讨论】：

这很好用，只是它没有解决
块内嵌入的
标签的问题。这是我主要关心的问题，因为
会重置索引。我想知道是否有一种快速的方法可以使用
标签获取正确的文本片段，而代码很少。
您的 JS Fiddle 不起作用。如果您在第一个“is”字下划线，它将第一个字“This”中的“is”

【解决方案2】：

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

您可能会发现通过document.execCommand() 可用的命令之一可以完成这项工作。如果做不到这一点，如果您想保留换行符之类的格式，这是一项非常重要的任务，因为您需要在<span> 标签内的选择中包围每个文本节点。如果您的 span 有特定的 CSS 类，那么您可以使用我的 Rangy 库的 CSS class applier 模块。

【讨论】：