12

選択したテキストの背景色を変更するスクリプトがあります。ただし、テキストが複数の要素/タグにわたって選択されていると、問題が発生します。

私が持っているコードは次のとおりです。

var text = window.getSelection().getRangeAt(0);
var colour = document.createElement("hlight");
colour.style.backgroundColor = "Yellow";
text.surroundContents(colour);

出力されるエラーは次のとおりです。

Error: The boundary-points of a range does not meet specific requirements. =
NS_ERROR_DOM_RANGE_BAD_BOUNDARYPOINTS_ERR
Line: 7

これは getRange() 関数に関係していると思いますが、私は JavaScript の初心者であるため、どのように進めればよいかわかりません。

私が達成しようとしていることを再現できる他の方法はありますか?

どうもありがとう。

4

2 に答える 2

18

今日、この質問が寄せられました: DOM Range オブジェクトのテキストを強調表示するにはどうすればよいですか?

これが私の答えです：

以下はあなたが望むことをするはずです。IE 以外のブラウザーでは、designMode をオンにし、背景色を適用してから、designMode を再びオフに切り替えます。

アップデート

IE 9 で動作するように修正しました。

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);
    }
}
于 2010-04-06T11:18:59.897 に答える