7

現在のキャレットの位置でtextarreaの単語を取得するにはどうすればよいですか？

私はこのようなことを試みましたが、これはキャレット位置の文字までの単語の最初の文字だけを返します。例えば：

カーソルがfoとoの間にある場合、カーソルは期待どおりではfoなく戻りますfoo。

Foobar|はbarfooと同じではありません。=>Fo期待Foo

Foobarはbarfooと同等ではありません|。=>equ期待し equalます。

これが私がこれまでにしたことです：

function getCaretPosition(ctrl) {
    var start, end;
    if (ctrl.setSelectionRange) {
        start = ctrl.selectionStart;
        end = ctrl.selectionEnd;
    } else if (document.selection && document.selection.createRange) {
        var range = document.selection.createRange();
        start = 0 - range.duplicate().moveStart('character', -100000);
        end = start + range.text.length;
    }
    return {
        start: start,
        end: end
    }
}

$("textarea").keyup(function () {
    var caret = getCaretPosition(this);

    var result = /\S+$/.exec(this.value.slice(0, caret.end));
    var lastWord = result ? result[0] : null;
    alert(lastWord);
});

http://fiddle.jshell.net/gANLv/

4

3 に答える 3

5

コードのこの行を次のように変更してみてください。

 var result = /\S+$/.exec(this.value.slice(0, this.value.indexOf(' ',caret.end)));
于 2013-03-24T16:26:28.210 に答える
1

バニラJSの答えを探してこれに遭遇し、1つを書くことになりました。これは、最近のすべてのブラウザで機能する比較的安全なユーティリティ関数です（任意のノードを渡すか、引数なしで呼び出すことができ、デフォルトでdocument.activeElement）。

このメソッドは、未定義、ゼロ、またはN個の長さの空白文字列を返す可能性があることに注意してください。

  • このような選択を行うと" "、2つの長さの空白文字列が返されます
  • 選択がなく、ページにカレットがない場合（つまり、テキストエリアがフォーカスされていない場合）undefinedが返されます
  • 開始/終了/単語内にないテキストエリア内に注意を払うと、長さゼロの文字列が返されます
  • 単語の開始/終了/単語内にあるテキストエリア内に注意を払うと、その単語（句読点と特殊文字を含む）が返されます
// returns the current window selection if present, else the current node selection if start and end
// are not equal, otherwise returns the word that has the caret positioned at the start/end/within it
function getCurrentSelection (node = document.activeElement) {
  if (window.getSelection().toString().length > 0) {
    return window.getSelection().toString()
  }

  if (node && node.selectionStart !== node.selectionEnd) {
    return node.value.slice(node.selectionStart, node.selectionEnd)
  }

  if (node && node.selectionStart >= 0) {
    const boundaries = {
      start: node.selectionStart,
      end: node.selectionStart
    }
    const range = document.createRange()
    range.selectNode(node)
    const text = range.cloneContents().textContent
    if (text) {
      let i = 0
      while (i < 1) {
        const start = boundaries.start
        const end = boundaries.end
        const prevChar = text.charAt(start - 1)
        const currentChar = text.charAt(end)

        if (!prevChar.match(/\s/g) && prevChar.length > 0) {
          boundaries.start--
        }

        if (!currentChar.match(/\s/g) && currentChar.length > 0) {
          boundaries.end++
        }

        // if we haven't moved either boundary, we have our word
        if (start === boundaries.start && end === boundaries.end) {
          console.log('found!')
          i = 1
        }
      }
      return text.slice(boundaries.start, boundaries.end)
    }
  }
}
于 2019-09-18T17:38:17.787 に答える
0 
val = input.value.split(" ");
last_word = val.length > 0 ? val[val.length-1] : val[0];
console.log(last_word);
于 2021-06-07T09:29:21.847 に答える