javascript - Rangy:如何获取使用 Highlighter 模块创建的 span 元素？

Question

我正在使用 highlighter module在 Rangy 中可用，它非常适合为所选文本创建高亮显示。

在 html 的更改方面，所选文本被替换为如下所示的 span 标记:

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

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

请注意，其他地方可能有其他带或不带高亮标记的 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;
}