textarea.selectionEnd 总是等于 textarea.value 中的最后一个字符

Question

        function makeBold() {
            ta = document.getElementById('instructions');
            if (ta.selectionStart != ta.selectionEnd) {
                ta.value = [ta.value.slice(0, ta.selectionStart), '<strong>', ta.value.slice(ta.selectionStart)].join('');
                ta.value = [ta.value.slice(0, ta.selectionEnd), '</strong>', ta.value.slice(ta.selectionEnd)].join('');
            }
        }

I wrote this function that gets triggered by an on_click event for a button. .selectionStart returns the start of the selected text but .selectionEnd is always returning the last character of the textearea's value, not the index where the selected text ends.

I tested this with:

                console.log(ta.selectionEnd, ta.value.length)

and they both return the same.

Can anyone help me see what I am misunderstanding here?

Answer 1

Bit of a rubber duck moment.

I have solved this with the code:

        function makeBold() {
            ta = document.getElementById('instructions');
            const start = ta.selectionStart;
            const end = ta.selectionEnd;
            if (ta.selectionStart != ta.selectionEnd) {
                ta.value = [ta.value.slice(0, start), '<strong>', ta.value.slice(start)].join('');
                ta.value = [ta.value.slice(0, end+8), '</strong>', ta.value.slice(end+8)].join('');
            }
        }

I suspect editing the textarea's value removed the current selection, so I captured the start and end of the selection first, then make the edits. I also add 8 to the value of.selectionEnd to account for the 8 characters in ''.