4

我正在使用 Rangy 中提供的荧光笔模块，它在为所选文本创建高亮显示时效果很好。

在对 html 的更改方面，选定的文本将替换为 span 标签，例如如下所示：

the selected text is <span class="highlight">replaced by a span tag</span> like the

我想要做的是在创建 span 元素后获取它的引用，这样我就可以用它做一些其他的事情。如何才能做到这一点？

请注意，其他地方可能有其他带或不带高亮标签的跨度，因此无法使用这些跨度找到它。

我必须为所选文本创建突出显示的代码的重要部分是：

var highlighter = null;
var cssApplier = null;

rangy.init();
cssApplier = rangy.createCssClassApplier("highlight", { normalize: true });
highlighter = rangy.createHighlighter(document, "TextRange");
highlighter.addClassApplier(cssApplier);

var selection = rangy.getSelection();
highlighter.highlightSelection("highlight", selection);
4

2 回答 2

5

我正在等待@TimDown 用工作代码更新他的答案。但是由于他没有这样做，所以我会自己发布一些（基于他的回答）。

假设选择仍然有效，以下函数将返回一个已创建的突出显示元素数组：

function GetAllCreatedElements(selection) {
    var nodes = selection.getRangeAt(0).getNodes(false, function (el) {
        return el.parentNode && el.parentNode.className == "highlight";
    });

    var spans = [];

    for (var i = 0; i < nodes.length; i++) {
        spans.push(nodes[i].parentNode);
    }
    return spans;
}
于 2013-02-08T19:19:08.830 回答
4

不能保证只会<span>创建一个元素：如果选择跨越元素边界，则可以创建多个跨度。

无论如何，由于选择被保留，您可以使用getNodes()选择范围的方法来获取跨度：

var spans = selection.getRangeAt(0).getNodes([1], function(el) {
    return el.tagName == "SPAN" && el.className == "highlight";
});
于 2013-02-05T16:03:59.567 回答