web-dev-qa-db-ja.com

カーソルがJavaScript内（またはJavaScript内）で触れている完全なWordを取得する

ネイティブ入力フィールドを使用すると、カーソルの位置を正確に取得できます。また、ハイライト表示されたテキストは簡単です。

// get cursor position
console.log(input.selectionStart);
// get highlighted text
console.log(input.value.substr(input.selectionStart, input.selectionEnd - input.selectionStart));

しかし、カーソルが触れている単語全体を取得するにはどうすればよいでしょうか。

this is a |sent|ence|

質問：

各パイプが潜在的なカーソル位置である場合、矢印キーまたはWordの前後でクリックされた場合、完全なWordの「文」を取得するにはどうすればよいですか？

サブ質問：

  1. このソリューションの範囲またはRegEx？
  2. RegExは、文字列内の位置によって回避できますか？
  3. 文字列内の指定された文字位置であれば、正規表現は単語を見つけることができます

研究：
https://javascript.info/selection-range 。
https://developer.mozilla.org/en-US/docs/Web/API/range 。
https://developer.mozilla.org/en-US/docs/Web/API/Document/caretRangeFromPoint （Chromeのみ）

動作 CodePen with RegEx 友人から。

javascripthtmlregexrange
5
Ben Racicot

Rangesの質問には回答しませんが、私は自分の回答を投稿します。それはまだ宙に浮いています。

CodePen

// Thanks to Yash Mathur for this solution
public getWordAtNthPosition(str: string, position: number) {
    if (!/^[A-Z]|^[0-9]|\s$/i.test(str[position])) {
        return null;
    }
    const nWord = str.substr(0, position).split(/\W+/g).length;
    const r = new RegExp(`(?=((\\w+)\\W*){${nWord}})`, 'g');
    const segs = r.exec(str);
    if (!segs || !segs.length) {
        return null;
    }
    return r.exec(str)[2];
}

おそらく誰かがこれをさらに最適化できますか？

0
Ben Racicot