textareaのキャレットから行番号を取得する

Question

前提・実現したいこと

HTMLのtextareaタグを使用してキャレット位置から行番号を取得したいです。
textareaタグのwrap属性は下記となります。
wrap="hard" cols="16"

問題となっているのは、ワードラップが発生した場合でも行番号が下記の通り取得できません。
【入力情報】
1行目：123456789012345(改行)
2行目：123456789△(ワードラップにより次の行に123456789012345が移動)
3行目：123456789012345(EOF)
→キャレット（カーソル）が3行目にあれば3を取得したいのですが、実際は2となってしまいます。
→△は半角空白、()は補足です。

何かいい方法はありませんでしょうか。

試したこと

・改行コードによる文章の分割　→　ワードラップの対応ができない。
・改行コード　or １行の最大文字数の判定で行数を求める　→　ワードラップが発生すると2行目みたいにMAX文字数が設定されていないため判定できない。
・キャレット座標を取得するライブラリを活用（https://d.akiroom.com/2012-06/jquery-textarea-caret-position-javascript-library/）
→ワードラップに対応しておらず、ワードラップによって次行にいってもY軸は変更されなかった。

補足情報（FW/ツールのバージョンなど）

ブラウザは「Google Chrome バージョン: 81.0.4044.138」です。
HTML、CSS、Javascript(JQuery)を使用しております。
フレームワークは他に何か使う想定はありません。

Answer 1

要件が「折り返しを改行と見なす「論理行」の行番号を取得したい」として、アイデアだけ出します。

1. 対象のtextarea要素からline-height,padding等のテキスト表示に関連するconputedStyle値を抽出
2. cloneNode()でtextarea要素を複製し、適当な場所にappendChild (visibility: hiddenでも期待通りに動作するかも)
3. 対象のtextarea要素のvalueプロパティ値を変数valueに格納
4. 変数value値を1文字ずつ抽出 -> 複製したtextarea要素のvalueプロパティに代入
5. 前stepを繰り返し、scrollheightが上昇したら、行番号をインクリメント
6. キャレット位置に到達するまで前stepを繰り返す
7. 複製したtextarea要素をremoveChild

Re: IT35836826 さん

Comments

[IT35836826]

ありがとうございます！