1

我正在尝试在 html 元素中获取文本选择，然后在其周围插入 span 标签。到目前为止，我遇到了正确索引的问题。如果我突出显示<p>块内的文本，则索引在标记后变为 0 <br>。我希望能够将文本切片（）出来，然后在突出显示文本以及抓取选定的文本并通过 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));
});
4

2 回答 2

2

好吧，我在 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>'));
});​

希望这可以帮助！

于 2012-06-23T18:47:40.453 回答
1

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

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

于 2012-06-24T14:30:45.653 回答