6

マウスがクリックされたときに、その位置にあるコンテンツ編集可能なdivから1つの単語を抽出しようとしています。例えば：

Lorem ipsum dolorはアメットに座り、cons |ecteturadipiscingエリート。Crasvestibulumgravidatincidunt。Proin justo dolor、iaculis vulputate eleifend et、facilisiseuerat。*

|を使用する カレットを表すには、関数は「consectetur」を返す必要があります。

私のコード：

window.onload = function () {
        document.getElementById("text-editor").onclick = function () {
            var caretPos = 0, containerEl = null, sel, range;
            if (window.getSelection) {
                sel = window.getSelection();
                if (sel.rangeCount) {
                    range = sel.getRangeAt(0);
                    if (range.commonAncestorContainer.parentNode == this) {
                        caretPos = range.endOffset;
                    }
                }
            } else if (document.selection && document.selection.createRange) {
                range = document.selection.createRange();
                if (range.parentElement() == this) {
                    var tempEl = document.createElement("span");
                    this.insertBefore(tempEl, this.firstChild);
                    var tempRange = range.duplicate();
                    tempRange.moveToElementText(tempEl);
                    tempRange.setEndPoint("EndToEnd", range);
                    caretPos = tempRange.text.length;
                }
            }
            var prevSpace, nextSpace, text = this.innerText;
            
            prevSpace = text.substring(0,caretPos).lastIndexOf(" ");
            nextSpace = text.indexOf(" ", caretPos + 1);
            nextSpace == -1 ? nextSpace = text.length - 1 : false;
            prevSpace++;
            console.log([prevSpace,caretPos,nextSpace].join("|"));
            var word = text.substring(prevSpace, nextSpace);
            //Removes punctuation and whitespace.
            var patt = new RegExp("([A-Za-z0-9']*)","g");
            word = patt.exec(word)[0];
            document.getElementById("current-word").innerHTML = word;
        };
    };

関数は、contenteditable divのマウスクリックイベントにバインドされます。このイベントは、キャレット位置を計算し、前後のスペース文字（または文字列の最初または最後）のインデックスを検索し、サブ文字列を使用して単語を決定します。句読点と空白を削除するための迅速な正規表現の一致があり、最終的に正しい単語になります。

これは、contenteditable div内に単一のテキストノードがある場合は正常に機能しましたが、タグやその他のさまざまなタグを削除し始めるとすぐに、キャレット位置を計算するメソッドの一部が機能しなくなり、常に0と計算されました。テキストの場合と同じように、HTMLでカレットの位置を計算する方法はありますか？

そうでない場合、誰かが別の方法を提案できますか？

4

2 に答える 2

17

これには、私のRangyライブラリの新しいTextRangeモジュールを使用できますが、その1つの機能だけでは非常にやり過ぎです。必要なコードは次のとおりです。

var sel = rangy.getSelection();
sel.expand("word");
var word = sel.text();
alert(word);

それ以外の場合、Blink以前のOpera（バージョン12まで）およびFirefox <4をサポートせずに生活できる場合は、Selection.modify()（WebKit、Firefox）および（IE）のexpand()方法を使用できます。TextRangeこれが例です。

デモ： http： //jsfiddle.net/timdown/dBgHn/1/

コード：

function getWord() {
    var sel, word = "";
    if (window.getSelection && (sel = window.getSelection()).modify) {
        var selectedRange = sel.getRangeAt(0);
        sel.collapseToStart();
        sel.modify("move", "backward", "word");
        sel.modify("extend", "forward", "word");
        
        word = sel.toString();
        
        // Restore selection
        sel.removeAllRanges();
        sel.addRange(selectedRange);
    } else if ( (sel = document.selection) && sel.type != "Control") {
        var range = sel.createRange();
        range.collapse(true);
        range.expand("word");
        word = range.text;
    }
    alert(word);
}
于 2012-06-28T15:42:58.263 に答える
0

BitBucketは、これを行うCursores.jsライブラリをリリースしました。これは小さく、焦点が絞られており、便利です-http: //cursores.bitbucket.org/

私が抱えている唯一の問題は、キャレットの左側にテキストがない場合、トークンを取得しないことです。たとえば、「t | est」は機能しますが、「|test」は機能しません。

于 2014-04-02T11:59:53.297 に答える