1

私は、ユーザーがテキストを選択して黄色で強調表示できるようにする単純な Web アプリを楽しみのために作成しています (または任意の色は関係ありません)。これが私がこれまでに持っているものです：

        function replaceSelectedText() {
            var sel, range;
            var replacementText, spanTag;
            if (window.getSelection) {
                replacementText = window.getSelection().toString();

                spanTag = document.createElement("span");
                spanTag.className = "highlighted";
                spanTag.appendChild(replacementText);

                sel = window.getSelection();
                if (sel.rangeCount) {
                    range = sel.getRangeAt(0);
                    range.deleteContents();
                    //range.insertNode(document.createTextNode(replacementText));
                    range.insertNode(spanTag);
                }
            } else if (document.selection && document.selection.createRange) {
                replacementText = '<span class="highlighted">' + document.selection.createRange().text + '</span>';
                range = document.selection.createRange();
                range.text = replacementText;
            }
        }

        document.onmouseup = replaceSelectedText;
        document.onkeyup = replaceSelectedText;

選択したフレーズを強調表示する場所で動作させましたが、本文の HTML で replace() 呼び出しを使用しただけだったので、ユーザーが「a」のような一般的な単語を選択すると、「a」の最初の出現がむしろ強調表示されます。彼らがクリックしたものよりも。

これまでのコードで正しい軌道に乗っていますか、それとも replace() 呼び出しを引き続き使用する必要がありますか? 置換は機能するようですが、選択した単語が発生する場所の配列インデックスを取得できないようで、範囲は非常に有用な値を返さないようです。

前もって感謝します。

4

3 に答える 3

1

この投稿の場合のように、おそらく使用する必要がある選択を置き換えるためにカーソルの位置も取得する必要があるという事実を除けば、このアプローチに問題はありません。

$("#myTextInput").bind("keydown keypress mousemove", function() {
  alert("Current position: " + $(this).caret().start);
});

jQuery：ブラウザ固有のコードなしで入力のテキストのカーソル位置を取得しますか？

于 2012-12-20T16:12:09.590 に答える
1

経由で、現在の特定のノードへの参照を取得できますgetSelection().baseNode。選択のインデックスと長さも提供されるため、置換を行う代わりに正確なテキストを置換できます。

于 2012-12-20T16:05:55.057 に答える
0

http://code.google.com/p/rangy/を使用します

選択したテキストを置き換えるには、マウスアップのイベントを次のコードに追加します

 var el = $("<span></span>");
el.text(rangy.getSelection().getRangeAt(0).toString());
 rangy.getSelection().getRangeAt(0).deleteContents();
 rangy.getSelection().getRangeAt(0).insertNode(el.get(0));
 rangy.getSelection().getRangeAt(0).getSelection().setSingleRange(range);
于 2012-12-20T16:11:59.040 に答える