【JavaScript】textareaでサジェスト機能を作る（ために必要な判定処理を作る）
↓こんな感じにするために必要な処理（右側textarea内の挙動）
https://gyazo.com/46c2356bbc0a40045dd7e129faa99112
（mp4からgifに変換したけど背景色がなんだか妙なことに）
やりたいこと
[以降に入力した文字を取得したい
code:js
// キー入力時に発火する関数を作る
function suggestOnTextarea(textarea, func) { // textareaはElement、funcは関数
const cursorPosition = textarea.selectionStart; // Number キャレット位置を取得（何文字目か）
const value = textarea.value; // String 全文取得
let temp = '', count = 1;
while (cursorPosition - count > 0) { // 判定対象の文字がある限り繰り返す
temp = value.substring(cursorPosition - count, cursorPosition - count + 1); // String 遡って1文字を取得
if (temp == '[') break; // 指定した括弧に当たったら処理を抜ける
count++;
if (temp == ']' || temp == '\n' || cursorPosition - count < 0) return; // 閉じ括弧、改行文字、valueの先頭に達したら終了
}
const text = value.substring(cursorPosition - count + 1, cursorPosition); // String '['以降の文字を取得
if (!text) return; // '['直後で文字がない場合は終了
func(value, text, cursorPosition, count); // 別途作成した関数に変数を渡して具体的な処理（サジェスト候補の表示、選択時の処理など）
}
// 実装時
const hoge = document.getElementById('hoge'); // textarea
hoge.addEventListener('keydown', (e) => {
if (e.shiftKey || e.ctrlKey || e.altKey) return; // 反応させたくないキーがあれば手前でreturnする（処理前の箇所ならどこでもいい）
setTimeout(() => { // 今入力した文字を反映するため処理を一瞬遅らす
suggestOnTextarea(hoge, (value, text, cursorPosition, count) => {
// 入力時に実行する処理を書く（サジェスト候補の表示、選択時の処理など）
})
}, 10)
})
（普通どうやるのかはわからないけどこうやったらできた）
#JavaScript