兰吉：如何获得使用荧光笔模块创建的span元素？

Question

我正在使用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);

Answer 1

我在等待@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;
}