Question

我正在使用Rangy中提供的highlighter module，它可以很好地为所选文本创建高亮显示。

就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

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

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

var spans = selection.getRangeAt(0).getNodes([1], function(el) {
    return el.tagName == "SPAN" && el.className == "highlight";
});

Answer 2

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

Rangy：我怎样才能获得使用Highlighter模块创建的span元素？

2 个答案: