5

次の HTML がある場合:

<div class="content">
Vivamus <span>luctus</span> urna sed urna ultricies ac tempor dui sagittis.
</div>

mouseupそして、選択したテキストの範囲を表示するイベントを実行します。

$(".content").on("mouseup", function () {
    var start = window.getSelection().baseOffset;
    var end = window.getSelection().focusOffset;
    if (start < end) {
        var start = window.getSelection().baseOffset;
        var end = window.getSelection().focusOffset;
    } else {
        var start = window.getSelection().focusOffset;
        var end = window.getSelection().baseOffset;
    }
    console.log(window.getSelection());
    console.log(start + ", " + end);
});

Vivamusそして、コンテンツから単語を選択すると、それが1, 8選択範囲であるため、ログに記録されます。

ただし、単語を選択するとurna、ログに記録されますが、HTML15, 20の要素は考慮されません。<span>

テキストだけでなく、HTMLタグもカウントする必要がありますかfocusOffset?baseOffset

4

1 に答える 1

8

アップデート

実際の例: http://jsfiddle.net/FLwxj/61/

clearSelection()関数と置換アプローチを使用して、目的の結果を得ることができました。

var txt = $('#Text').html();
$('#Text').html(
    txt.replace(/<\/span>(?:\s)*<span class="highlight">/g, '')
);
clearSelection();

ソース:

以下に、問題に対する実用的な解決策をいくつか示します。コード効率の高い順に並べました。

作業ソリューション

  • https://stackoverflow.com/a/8697302/1085891 (実例)

    window.highlight = function() {
    var selection = window.getSelection().getRangeAt(0);
    var selectedText = selection.extractContents();
    var span = document.createElement("span");
    span.style.backgroundColor = "yellow";
    span.appendChild(selectedText);
    span.onclick = function (ev) {
    this.parentNode.insertBefore(
        document.createTextNode(this.innerHTML), 
        this
    );
    this.parentNode.removeChild(this);
    }
    selection.insertNode(span);
}

  • https://stackoverflow.com/a/1623974/1085891 (実例)

    $(".content").on("mouseup", function () {
   makeEditableAndHighlight('yellow'); 
});

function makeEditableAndHighlight(colour) {
    sel = window.getSelection();
    if (sel.rangeCount && sel.getRangeAt) {
    range = sel.getRangeAt(0);
    }
    document.designMode = "on";
    if (range) {
    sel.removeAllRanges();
    sel.addRange(range);
    }
    // Use HiliteColor since some browsers apply BackColor to the whole block
    if (!document.execCommand("HiliteColor", false, colour)) {
    document.execCommand("BackColor", false, colour);
    }
    document.designMode = "off";
}

function highlight(colour) {
    var range, sel;
    if (window.getSelection) {
    // IE9 and non-IE
    try {
        if (!document.execCommand("BackColor", false, colour)) {
        makeEditableAndHighlight(colour);
        }
    } catch (ex) {
        makeEditableAndHighlight(colour)
    }
    } else if (document.selection && document.selection.createRange) {
    // IE <= 8 case
    range = document.selection.createRange();
    range.execCommand("BackColor", false, colour);
    }
}

  • https://stackoverflow.com/a/12823606/1085891 (ライブの例)

その他の役立つ解決策:

于 2013-03-05T04:35:09.173 に答える