17

マウスを使用してhtmlページ（Firefoxで開く）のテキストを選択し、javascript関数を使用して、選択したテキストに対応するrangeobjectを作成/取得します。

 userSelection =window.getSelection(); 
 var rangeObject = getRangeObject(userSelection);

ここで、rangeobjectの下にあるすべてのテキストを強調表示したいと思います。このようにしています。

  var span = document.createElement("span");
  rangeObject.surroundContents(span);
  span.style.backgroundColor = "yellow";

これは、rangeobject（開始点と終了点）が同じテキストノードにある場合にのみ正常に機能し、対応するテキストを強調表示します。Ex

    <p>In this case,the text selected will be highlighted properly,
       because the selected text lies under a single textnode</p>

ただし、rangeobjectが複数のテキストノードをカバーしている場合は、適切に機能していません。最初のテキストノードにあるテキストのみが強調表示されます。例

 <p><h3>In this case</h3>, only the text inside the header(h3) 
  will be highlighted, not any text outside the header</p>

範囲が単一ノードにあるか複数ノードにあるかに関係なく、範囲オブジェクトの下にあるすべてのテキストを強調表示して、どのように作成できますか？ありがとう....

4

5 に答える 5

25

document's またはTextRange'sメソッドを使用することをお勧めしexecCommandます。これらはまさにそのような目的のために構築されていますが、通常は編集可能なドキュメントで使用されます。同様の質問に対して私が与えた答えは次のとおりです。

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

アップデート

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

2013 年 9 月 12 日更新

この方法で作成されたハイライトを削除する方法を詳しく説明しているリンクを次に示します。

https://stackoverflow.com/a/8106283/96100

function makeEditableAndHighlight(colour) {
    var range, 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;
    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-06T09:50:11.880 に答える
6

Rangyは、 CSS Class Applier モジュールを使用してこの問題を完全に解決する、クロスブラウザーの範囲および選択ライブラリです。私はそれを使用して、さまざまなデスクトップ ブラウザーと iPad で強調表示を実装していますが、完全に機能します。

Tim Down の答えは素晴らしいですが、Rangy のおかげで、すべての機能検出コードを自分で作成して維持する必要がなくなります。

于 2012-10-09T11:30:58.243 に答える
1

この機能の必要性について詳しく教えてください。選択したテキストのハイライト スタイルのみを変更したい場合は、CSS を使用できます: '::selection'

詳細情報: http://www.quirksmode.org/css/selection.html https://developer.mozilla.org/en/CSS/::selection

于 2010-04-06T06:59:15.373 に答える
0

周囲のスパンにクラスを追加して、階層的な CSS を適用してみてはいかがでしょうか。

var span = document.createElement("span");
span.className="selection";
rangeObject.surroundContents(span);

CSS定義では、

span.selection, span.selection * {
   background-color : yellow;  
}

私はそれを試しませんでした。しかし、それがうまくいくと推測するだけです。

于 2010-04-06T09:34:44.657 に答える