4

Rangyで利用可能な蛍光ペンモジュールを使用していますが、選択したテキストの蛍光ペンを作成するのに最適です。

htmlの変更に関しては、選択したテキストは、たとえば次のようなスパンタグに置き換えられます。

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

1つの<span>要素のみが作成されるという保証はありません。選択範囲が要素の境界を越える場合、複数のスパンが作成される可能性があります。

とにかく、選択範囲が保持さgetNodes()れるため、選択範囲のメソッドを使用してスパンを取得できます。

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