Question

我正在尝试在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));
});

Answer 1

好吧，我在jsfiddle上查看了你的代码，问题似乎是javascript不知道“highlightElement”是什么，所以我在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>'));
});

希望这有帮助！

Answer 2

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

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

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

2 个答案: